A Visual Explanation of React Server Components

I've been digging into React Server Components via Shopify Hydrogen, and I'm very impressed & excited.

As we've found time and again, the more you load up your app with JS, the slower it gets. React Server Components (RSC) can be a great way to avoid shipping so much JS to the browser, by actually generating vdom on a server instead.

Here is a visual explanation of my understanding of RSC and what it means for you:

First, how do you author server components?

In short, they are just React components! With all the latest goodies of concurrent mode, such as elegantly fetching data via hooks

Server components can even fetch private data and are denoted by a file ending in *.server.js

Next, how do you load these components?

For Hydrogen, the top level is always a server component.

But, with some caveats, you can mix server components, client (aka traditional) components, and shared components (components that can render on server OR client), in one tree

So, how do pages load?

Because of the benefits of concurrent mode, like suspense, we can load pages via streams

For instance, with my Hydrogen app, the header loads immediately as HTML, and then the body (which has dynamic data) streams in each piece as it is ready

For the nerds: I find the streaming format very interesting

It is a mix of metadata and VDOM JSON.

It is separated by newlines so each line can be processed at a time, not having to wait for the final result to parse the body

It is fetched as /react?state={pathname:'/', ...}

Then, the coolest part: client-side routing

Client-side routing is done without a refresh and doesn't require any new JS to load

The client fetches the new VDOM from the server, which may process lots of JS that doesn't need to load in browser
As it streams in, React patches in the minimal changes to the DOM

The result

The result is a pretty great experience.

With some caveats about new mental overhead in needing to have some concern about where is the best place to put certain data and logic (client/server/shared), you have a very new, very performant way to build fast + dynamic React apps