[Typo]: Client Components running on the server

[joshwcomeau]

trafficstars

Summary

The "use client" docs state:

During render, the framework will server-render the root component and continue through the render tree, opting-out of evaluating any code imported from client-marked code.

The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then completes rendering the rest of the tree.

This implies that Client Components are skipped during SSR, but I don’t think that’s true.

Page

https://react.dev/reference/rsc/use-client

Details

My understanding is that Client Components will render on the server during SSR, and hydrate on the client. This is necessary so that the server-generated HTML is complete; if Client Components were truly skipped during SSR, our HTML would be full of holes that would only be filled in after hydration.

Another way to verify this is to add a console.log() to a Client Component, within a component function. The log will be printed in our server terminal, showing that the code is indeed evaluated on the server.

It’s possible I'm misunderstanding what is meant by "render" in this context, but it really makes it sound like the server skips any files that are marked with "use client". And unless this changed very recently, it is demonstrably untrue.

[sebastiancarlos]

@joshwcomeau thanks for raising this issue! I also find this documentation confusing.

Here's how I've tried to reconcile the discrepancy between the React docs and what actually happens:

When the docs refer to server/client in the context of Server Components, they seem to describe the "server" as the process that generates the streamed description of server components within a tree whose root is a server component. This process also creates a JS client bundle that excludes the code for these server components. From this perspective, it's correct that the "RSC server" does not render Client Components in the tree.

However, when we're talking about an "SSR server" (which is also part of the same app deployment), both Server and Client Components are rendered. So, while the RSC server skips Client Components, the SSR server does not.

Additionally (and confusingly), the docs sometimes mention "RSC without a server," where "server" here refers to the SSR process. In this case, the point seems to be that RSC can be used in apps that don't employ SSR.

In any case, I think the docs could benefit from clarifying these distinctions to avoid confusion.