Stumbled accross NextJS in npm and tried it out. Look pretty good and relatively easy to use. However, one thing about it is still not clear to me:
Suppose I want to have also have a NodeJS (or whatever) api server in complement with the server side rendering that NextJS offers. Do I need 2 server then? For example:
Also is NextJS just a rendering server (which can render React components and creates HTML) or something else/more?
You can definitely use the same server to implement your api.
On official documentation page about Custom server and routing there are examples of integrating with popular node frameworks like express or koa - so you can use them for regular purposes.
What about nextjs itself - like it's said on official documentation page:
Next.js is a minimalistic framework for server-rendered React
applications.
So it has not only capabilities of server side rendering, but also routing (including client one), css-in-js setup and so on.
Related
I got confuse while searching top JS backend framework then I found NextJS is one of the top list, I thought nextjs is just a simplify of CRA and still need like nodejs as the backend. Back to my confusion, so when we normally create a full JS app we will need frontend and backend tech like (nodejs + reactjs) so with this nextjs we can make a app just with nextjs ? **sorry for my bad English
Simply said, NextJS is basically React on wheels and has NodeJS built-in. It has lots of other features built-in so you need almost zero-configuration to build a full-stack app.
If you have 10 minutes to spare, take a look at this video
Essentially NextJS is a full-stack framework. Which means that developers can write both front-end and back-end code in a single environment. It can provide multiple benefits among various use cases. Which can be things like seo optimization, image optimization or quickly switching between different rendering methods (SSR, CSR, ISR or SSG).
As for your question "Can we make an app just with nextjs ?", you certainly can but it depends heavily on what type your app is.
In the last few years, I’ve been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x.
Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.
The use case needed to be SEO friendly, so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It’s not just dummy text.
Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.
I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That’s why my first thought was React.
The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don’t need and I do not want to add overhead to my application and I cannot customize it as I desire.
I continue researching and I found an express package called "express-react-views" that is a template engine for express but it does not allow to mount the React application at the client side.
Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.
My doubts / concerns are the following:
Is React the right tool / library for this use case?
In case of not being, what do you recommend?
Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?
I don’t want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.
The easiest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:
https://reactjs.org/docs/react-dom-server.html#reference
It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.
Our entire codebase is built on just express, we want to build it out and in the process convert it to a single page application. As of now I am opposed to rewriting the code to work with a framework like Angular, or React, to accomplish this.
Thanks for reading.
Are you sure a SPA web application is what you really want to achieve?
If you are, then the answer is Yes: you don't need a framework for any SPA or any other frontend purposes.
A SPA usually consists of following parts:
Client side routing (eg HTML history mode)
Client side templating (see Smashing Magazine article for some examples)
Retrieving the data (eg via Fetch API or Axios
So, using these technologies, regardless of your backend technology, you can create a SPA with Vanilla JS. Actually, what you use at your backend has little to no affect on your SPA.
However, depending on how big your application is or how much features you need, you might end up using one. Frontend frameworks are designed to make your life easier.
If you are looking for a framework with an easy learning curve, I strongly suggest Vue.js. You can even get started without installing or transpiling anything locally.
yes, you can - depending on the complexity of your application you may end up transitioning to React, Angular, or another frontend framework in the future depending on your needs.
here are some resources:
https://tutorialzine.com/2015/02/single-page-app-without-a-framework
Todo in different frameworks (for comparison):
http://todomvc.com/
Angular vs Vue vs React:
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176
If you're going for a real single page application you should be able to continue to use express. You'll find yourself jumping through some hoops though and using React/Angular would be a better approach because of how you could move forward with it in the future with no limitations.
Can someone enlighten me on web frameworks using nodejs? I recently started learning express js from free code camp and while it's all going good I'm confused as to what express entirely is. Is it a full stack framework? Is it purely for backend? I see that you can use different templating engines along with it.
I see things where people say you can use front end frameworks along with it. If express is able to already render views, what's the point of using a front end framework.
Also, what's the difference between express and something meteor, vuejs or react? There's just so many buzzwords out on the web that it's confusing.
Express is a back-end web server framework that runs in nodejs. It is purely for the back-end, though you can define routes/endpoints in it that any front-end can make ajax calls to.
You use Express to make the handling of web server requests and responses easier and fasster. It has support for things like:
Defining routes/urls/endpoints that you want to handle.
Serving static web pages.
Installing middleware for a wide variety of things including sessions and authentication.
Hooking into one of many template rendering engines.
Automatically parsing things like query parameters and form submissions.
Is it a full stack framework?
No. Express does not have a front-end component.
Is it purely for backend?
Yes.
Because Express has become so popular, there are also thousands of add-ins that can plug into express (often as middleware) for things like sessions or authentication.
Since it handles standard HTTP requests, you can use it with any front-end technology from just a plain browser to the many front-end frameworks.
Also, what's the difference between express and something meteor,
vuejs or react?
Express is a back-end framework (runs on the web server). vuejs and react are front-end libraries (run in the browser). Meteor is a full-stack framework. On the back-end, it runs on nodejs and the front-end component runs in the browser.
I see things where people say you can use front end frameworks along
with it. If express is able to already render views, what's the point
of using a front end framework.
Yes, Express can serve the web pages you view and it can use a server-side template engine to render them. But, there's potentially a lot more to a front-end framework than that. For example, express provides nothing to manage a user's interaction with a page in the browser or the building of dynamic web pages that change based on user interaction. If you're building web pages that create, read and update data from a database, then Express by itself provides no automation for doing that while other frameworks can offer a lot of help with that. You could build all that in your own JavaScript that would live in the web pages that Express was serving, but Express provides no help with that at all other than just delivering the JavaScript that you wrote on your own.
If you want to know more about what front-end frameworks do, then I'd suggest you read about frameworks like react, vuejs or angular to understand their value proposition. I'm not saying that you have to use a front-end framework (because you do not). There are zillions of sites on the web that consist of some sort of back-end framework and then plain JS/HTML web pages. Whether a front-end framework would benefit your development depends on what you're doing and how well it aligns with what a particular front-end framework offers.
Here are a couple good articles about what reactjs is:
ReactJS For Stupid People (fyi, I found it a very good article for smart people too).
What is React.js and Why I recommend it to other JavaScript Developers?
This article Full-Stack Frameworks contains a useful discussion of pre-built full-stack functionality such as Meteor vs. using a combination of technology such as MEAN (Mongo + Express + AngularJS + Node.js) or MERN (Mongo + Express + React + Node.js) and also touches on which technologies are more commonly used together.
I've been working on an isomorphic app built with react and I've read about using Relay.js and GraphQL for client-server interactions.
I've been wondering, is there any special set up or things to keep in mind when using Relay.js, when using react's server side rendering & isomorphic app development in particular?
React Relay currently has no "out of the box" solution for isomorphic application.
There's still a solution though:
isomorphic-relay: npm package with a very detailed documentation on how to integrate with it easily.
isomorphic-relay-router: npm package that adds server side rendering support to react-router-relay using isomorphic-relay.
For my understanding, adding server side rendering is in the works, but with no ETA.
You need to use babel to transform relay to graphql queries.
Dataloader from facebook or similar is needed for caching.
Your data model need to be fully normalised to work with above.
Try avoiding JSON as column type, difficult to describe in graphql
Use graphiql as browser plugin or standalone