reactwg · GitHub

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

A circle saying React Tree with two arrows pointing to possible outputs: HTML for first load, and JS code bundle for interactions

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

Same picture as before, but there is a new circle called Server Tree on the left which can talk to databases, filesystems, and internal services. The Server Tree passes props to the existing React Tree.

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:

Same picture as before, but React Tree is renamed to Client Tree

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).

Read the original on github.com ↗