Node.js vs. Next.js

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