Client Components Rendering on Client Side or Server Side

[VitoProgramming]

I am confused by how docs describe client components. It states client components are pre-rendered on the server and hydrated on the client, but it also says components in the Client Component module graph are primarily rendered on the client.

My questions is that in which context client components will be pre-rendered on the server and in which context it will be rendered on client. Please kindly clarify.

The official docs say:

Client Components
Client Components enable you to add client-side interactivity to your application. In Next.js, they are pre-rendered on the server and hydrated on the client. You can think of Client Components as how components in the Pages Router have always worked.

Good to know:

Components in the Server Component module graph are guaranteed to be only rendered on the server.
Components in the Client Component module graph are primarily rendered on the client, but with Next.js, they can also be pre-rendered on the server and hydrated on the client.
The "use client" directive must be defined at the top of a file before any imports.
"use client" does not need to be defined in every file. The Client module boundary only needs to be defined once, at the "entry point", for all modules imported into it to be considered a Client Component.

Link: https://nextjs.org/docs/getting-started/react-essentials#client-components

[icyJoseph]

Client components are rendered during any form of SSR, not just during pre-rendering.

Unless they are not part of the React Tree during SSR. See, https://demystifying-rsc.vercel.app/client-components/no-ssr/

This document is pretty good at eliminating any doubts:

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4

Maybe the "primarily", word is not the best choice there, but I do believe it is there to show "contrast" to React Server's components, all-in behavior.

• Server components are, all-in server side rendering
• Client components render in both environments, and can have stateful/interactive behaviour on the client

So the wording indicates how Client components are, mainly designed to achieve a set of features that give interactivity to a page, but are also designed to be part of the SSR output tree. The primary goal you'd have when using a Client Component is to gain interactivity.

[VitoProgramming]

Thanks for clear explanation. There are still few questions requiring clarification:

• You mention that 'Client components are rendered during any form of SSR, not just during pre-rendering.' As far as I know, SSR is just for pre-rendering HTML and sends it to client. Are there surly other forms of SSR?
• 'Client components render in both environments.' Do client components pre-render by default in Next.js? And in which context client components will be rendered on client side?

[icyJoseph]

Not sure what you mean by clear, but a React Server Component Tree, is like a VDOM but serialised, into what is known as RSC. That format contains the VDOM but serialised, and it has holes, to put Client components into.

To reconcile the Client and Server Component trees, is to slot the Client components into the Server Component tree.

Note that, this doesn't mean we should or must, skip collecting the HTML strings that these Client Components output. We can still generate HTML from these, so that we can have a complete HTML string.

[icyJoseph]

Maybe think of it this way, if you have a client component, you'll have a JS bundle that drives it. When the React Server Tree is created, every time a client component boundary is hit, a reference is put in the React Server Tree, a hole if you will.

Meanwhile, a client side tree of components is also prepared, but this is more like, JS chunks, that will drive these components. Because you cannot really, serialise functions, callback, etc, so instead, all of these are referred to by the chunk that contains them.

If you look into RSC format you'll see references to chunks and what not. React has to put the JS that drives those in place. Just like when we used to have a <button onClick={foo}>bar</button> kind of thing, which would just be a plain JS object, with a props property and onClick property within that.

[magnusriga]

Got it, so to put it together in steps and make the docs a bit more complete (my additions, based on your comments, in bold):

On the server:

1. React renders Server Components into a special data format called the React Server Component Payload (RSC Payload).
2. Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML on the server.

Then, on the client:

1. The HTML is used to immediately show a fast non-interactive preview of the route - this is for the initial page load only.
2. The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM. This means that the RSC Payload, which was sent from the server and which contains the RSC tree with slots for the RCCs, takes the RCCs and inserts them into the RSC tree. This is done so the browser can create the DOM, which is made interactive in the next step.
3. The JavaScript instructions are used to hydrate Client Components and make the application interactive.

--

I guess what I had not fully understood before, was that even though the browser receives a full HTML document from the server, it still needs to create a DOM representation of it. If I understood correctly, it does that through React, with takes the RSC tree from the RSC Payload and inserts the RCCs, to create a full component tree. This in turn allows React to create a VDOM, and via that create the browser's DOM. I am not sure why the docs says "update the DOM", as that implies there was already a DOM to begin with (after it receives the HTML from the server), but that is perhaps a minor point.

EDIT:

I think I am 90% there. Sorry for the persistence and thank you for your patience.

I might have been slightly wrong above. Specifically, I now believe the correct flow on the client side is along these lines:

1. The browser receives the initial HTML from the server, which in fact is an accurate representation of the entire page, just without interactivity. Remember, that HTML was created by executing both RSCs and RCCs on the server, so it is an accurate representation of the page.
2. When the browser receives the HTML from the server, it immediately creates a DOM representation of it and then paints the page.
3. Then, React combines the RSC tree with the RCC chunks, thus building a full component tree and a corresponding VDOM. React then updates the browser DOM. This is where I get confused. Why does it need to update the DOM here? Isn't the component tree (i.e. VDOM) it now created on the client exactly the same as the one it created on the server (which it used to build the initial HTML document)?
4. Finally, hydration happens, which is clear enough.

[oclockTwo]

This question has also been bothering me for hours, and now my understanding is the same as yours. For the query in 3, I think it's the same, but the exact reason why it's designed that way I don't know (although I have a bit of a simple guess)

[magnusriga]

This question has also been bothering me for hours, and now my understanding is the same as yours. For the query in 3, I think it's the same, but the exact reason why it's designed that way I don't know (although I have a bit of a simple guess)

@icyJoseph Do you know why (see point 3)?

[Grootsingh]

hey , In Nextjs Docs (Page: Lazy Loading > Skipping SSR) "Client Components will be pre-rendered (SSR) by default."

i am also confused here?
Client Component get's render on the server side at build to Generate HTML. when we request a route. server send HTML + RSC Payload + Client Component JavaScript. then during reconciliation React Tree get's generated and as it find Client Component (Placeholder) it then render client component (on client browser) then add that in the React tree. and once the react tree is completed then Hydration starts.

is this current?? if not plz clarify it.

when Nextjs Docs say "Client Components will be pre-rendered (SSR) by default" does that mean React Client component JavaScript get's render on the Server???? and server send pre-render React Client component JavaScript file?? i use to think that only the React Server Component gets render on the server and server send pre-render RSC Payload???

i am confused??

[adarshaacharya]

@Grootsingh
Client component doesn't necessarily means the html will be generated on client only, it will be also pre-rendered in the server either in build time or during the run time by nextjs think like the normal ssr components that we use in nextjs pre-RSC era , its just that for client component js for that particular component will be send to the bundle for hydrating the dom elements.