Steve SewellI'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
One more thing
Why have we been diving in? We've been integrating Builder.io to Hydrogen and having a blast.
It's a great new set of tools to build with for your whole team
https://github.com/builderio/builder-shopify-hydrogen
Next Steps
- Learn more about React Server Components
- Learn more about Buider.io
- Learn more about Shopify Hydrogen
