Thread by @Steve8708

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

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

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/sever/shared), you have a very new, very performant way to build fast + dynamic React apps

Why have we been diving in? We've been integrating @builderio to Hydrogen and having a blast. It's a great new set of tools to build with for your whole team

github.com/builderio/buil…

Have any Qs or feedback? Please share!

And I invite anyone from the @ShopifyDevs or @reactjs team to correct me if I got anything wrong, I am still digging in to form my understanding and excited for more docs + examples to come