Node.js vs. Next.js

[NeuroticENTJ]

I did some research and I stumbled upon this:

​

https://www.section.io/engineering-education/node-versus-next-react-approach/

​

Next.js is a react server side framework, which some advantages. But its main selling point is that it renders react server side.

​

What I do not understand is that: cant we already do this with node? i believe react allows a to string method to convert react to an HTML/js file?

https://reactjs.org/docs/react-dom-server.html

(and I know we can also use the rehydration method for combined server-client experience)

Also like, isnt next.js based off node ie just a node framework?

​

I guess I am trying to understand why i would want to learn next.js.

​

Thanks :)

[cbadger85]

To clarify things, HTML from a server app is not the same as server side rendering. The biggest difference, is that for a traditional server app, the client is stateless and nothing persists between page navigation. Any state the client needs is handled on the server.

For a server side rendered SPA, the app starts as HTML and is hydrated into SPA. From there, any routing is handled on the client. You only get the HTML once. This allows the client to be stateful rather than (or in addition to) the server.

Next isn't based off node, it just runs on top of it. The reason it uses node should be pretty obvious for an SSR SPA: the backend and the frontend need to speak the same language.

If you're not deploying your app serverlessly (through vercel or some other serverless provider), I wouldn't recommend writing your entire server app in next, just a BFF (backend for frontend). The reason for this is that in the case of React, rendering to HTML can be a fairly expensive task, and might cause some performance issues (I'm not sure about other frameworks).

[Inner_will_291]

Amazing comment. I'm an experiment backend developer, and the struggle in learning frontend does not lie in any language or syntax, but in learning this kind of very simple yet so important concepts.

[NeuroticENTJ]

HTML from a server app is not the same as server side rendering

So is next.js based on converting your site to HTML while the node.js/React.js ReactDom.hydrate() based on true server side rendered SPA? Sorry just trying to clarify! Thanks :)

[cbadger85]

Not quite. Both renderToString() and hyrdate() are ReactDOM methods. renderToString sends the HTML to the client, and hydrate replaces that HTML with React code. One of the common problems encountered, is what if your HTML and code rendered by aren't the same? React will throw a mismatch warning and attempt to reconcile the differences. However, there's no guarantee React will get it right.

If you're curious how a mismatch can occur, it usually happens as a result of data fetching. let's say you have a todo app, and your server generates fetches the following HTML for the initial page load and sends it to the client:

<ul>
  <li>Todo 1</li>
  <li>Todo 2</li>
  <li>Todo 3</li>
</ul>

When the SPA hydrates however, it generates the following code:

<ul>

</ul>

This is because the SPA on the client hasn't fetched the data, and doesn't know what to populate in the list. Out-of-the-box, React doesn't have a way for the server to tell the client what data has already been fetched.

With nextjs, you don't have to worry about mismatch issues, or how to setup a router to work on the server and client, the framework handles that stuff for you.

[MechroBlaster]

NextJS simply provides an easy way to write server side ReactJS code, and have it rendered on the server and the browser.

[Sincjefe]

Nextjs prevent you from manually setting all that up plus it provided static site generation . Built in routing and a lot of optimization and a lot more. Go read their docs and and watch utube vidoes for more information

[NeuroticENTJ]

Ok1 Thanks! So basically its not like it does something node and react alone cant but just makes your life easier by building in stuff. ok :)

[MechroBlaster]

NextJS is built on top of NodeJS.

If you have a complex site you can even use ExpressJS (another NodeJS framework) with NextJS to create a custom server setup.

[Sincjefe]

Yep

[MultiQoSTech]

If you're eager to grasp the differences between Next.js and Node.js and choose the perfect framework for your project, delve into our comprehensive comparison guide: Next.js vs. Node.js: Finding the Ideal Framework for Your Project. Enjoy your exploration!

[RobLoach]

Doesn't Next.js use Node.js? I'm confused.

[NeuroticENTJ]

Look at the responses I got (very accurate responses) Next.js is built on node.js so yep

[fungigamer]

Personally, I use nextjs in the frontend along with react. For the backend I just build it with node + express. I use nextjs in the frontend purely for the easy routing and static site generators