How are client components handled in terms of rendering in React Server Components paradigm,?

Question

I comprehend that server components undergo complete rendering on the server, and they aren't included in the JS bundle transmitted to the client. Additionally, server components don't undergo hydration on the client side.

However, my uncertainty lies with client components.

1. Are client components entirely incorporated into the client JS bundle and exclusively handled on the client side? —similar to conventional React behavior?
2. Alternatively, are client components partially rendered on the server and then dispatched to the client side with their JS bundle, undergoing hydration? This behavior is somewhat reminiscent of the pages router in Next.

I acknowledge the possibility that the handling of client components may differ from one framework to another, and Next.js might handle them distinctively compared to frameworks like Gatsby. I would appreciate clarification, particularly in the context of the Next app router.

I was going through this blog by Josh W. Comeau where it was mentioned that client components are rendered both on the client side and server side:

Excerpt from Josh W, Comeau blog

But I don't seem to find any other tutorial or blog (as far as I have searched) that seem to acknowledge the the above. The underline tone is always that the client components are handled client side.

This is causing confusion on how client components handled? 100% client side or both client and server side? If it is legit partially client and server then how exactly does it happen in context of Next App router?

Answer 1

For nextjs your client components are also rendered statically on the server for fast initial load times. It is then hydrated to add interactivity to those components. For your questions this means:

1. Are client components entirely incorporated into the client JS bundle and exclusively handled on the client side? —similar to conventional React behavior?

No, client components are initially rendered on the server to send over in the static HTML to present it to the user

2. Alternatively, are client components partially rendered on the server and then dispatched to the client side with their JS bundle, undergoing hydration? This behaviour is somewhat reminiscent of the pages router in Next.

Yes, client components are being hydrated using the hydrateRoot

As from the documentation:

On the server:

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

Then, on the client:

1. The HTML is used to immediately show a fast non-interactive initial preview of the route.
2. The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.
3. The JavaScript instructions are used to hydrate Client Components and make their UI interactive.

Read more on the nextjs documentation on rendering, especially this part