Why do Client Components get SSR'd to HTML?

[gaearon]

If you're familiar with React, your mental model before RSC might look similar to this (blank space on the left is intentional):

RSC does not change that mental model, but it adds a new layer before any of that existing code runs:

The RSC Server layer might remind you of Remix loaders, Astro templates, build-time scripts, and other code that runs ahead-of-time — but in the form of React components. To disambiguate, the "React you already knew" (and all its features) is called Client:

This is why Client components still get SSR'd to HTML. Client components are the components you always knew. They could be SSR'd before (to show something faster during the first load), and so they still get SSR'd to HTML.

One way to think about it is that in RSC, "Server" and "Client" doesn't directly correspond to a physical server and client. You can think of them more as "React Server" and "React Client". Props always flow from React Server to React Client, and there is a serialization boundary between them. React Server typically runs either at the build time (default), or on an actual server. React Client typically runs in both environments (in the browser it manages the DOM, in other environments it generates initial HTML).