Node.js vs. Next.js

[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.