Hi folks, welcome back to another article on my NextJS Distilled Series.

Review on SSR

We’ll be talking about dynamic SSR (HTML generated at runtime)

When we want to render HTML from a React App on the Server.

We start by building a React Component tree

Next, to turn into a Virtual DOM

Then render to HTML elements and ready to be shipped to the client.

In essence, we can say, SSR simply means

Just take the Component Tree, render it as HTML, and send that HTML to the browser.
Besides the HTML, the JS bundle contains React itself + component tree, which can also be sent to the browser, so that HTML can then be HYDRATED
In a nutshell, we also send the React code to make the HTML interactive

RSC and SSR

RSC is NOT the same as SSR, they are separate technologies.
RSC does NOT replace SSR, but to complements it.
They usually work together, frameworks can combine them (NEXTJS)
Both Client and Server components are INITIALLY RENDERED on the SERVER when SSR is used.
“Client” and “Server” in terms of NextJS can be different running environments of React. Of course, it can be normal “client-server”, but it doesn’t HAVE TO BE.
Just take the Component Tree, render it as HTML, and send that HTML to the browser. - Also works like this when coupled with RSC. ALL components are pre-rendered on the server.
In the RSC model, “SERVER” just means “developer computer”. It doesn’t need to be an actual web server.
Result: RSC does NOT require running a web server. Components could run only ONCE at built time (Static Site Generation)

In practice, since there is streaming and code splitting involved.

The code sent from the server to the client will be many different chunks.

Which then be requested by the client, as they become necessary over time.

As we discussed in the previous article.

Rendering a server component produces the RSC Payload.

👉 That payload will also sent to client.

👉 So that React has the entire component tree on the client, not just HTML.

👉 It is necessary to preserve UI state on future SC re-renders on the browser.

👉 The RSC payload, together with the React bundle or chunks to HYDRATE the HTML, make it interactive again.

👉 Of course, ONLY CLIENT COMPONENTS get hydrated!

It happens only on INITIAL RENDER.

On re-renders,

Client components only render on the actual client.

When the server component gets re-rendered.

A new RSC payload is generated and sent to the client - the actual browser.

And ready to be merged into the already existing React tree.

So all existing UI state can be preserved.

That’s all everyone.

Thanks for reading