React server components (RSCs) are experimental and only used by a few frameworks...
Until this workshop!
We'll be building this framework without any build tools. This means no TypeScript, no JSX, no Vite, nothing. We're going to be writing plain JavaScript and using Node.js/browser native APIs to build our framework.
That's right, you'll be building your own framwork that supports RSCs.
You'll get into the nitty-gritty detail by:
- Serializing and streaming your UI on the server to the client yourself with
renderToPipeableStream - Granularly streaming in your server components with Suspense
- Using Node's
AsyncLocalStorageto get context on the server. - Registering and using a Node loader to implement your own "use client" directive
- Building a full client router with history and cache
- Implementing server actions
This workshop follows the pattern of React Fundamentals but it's taken up 10 notches.
After working through this you'll truly understand React Server Components from the ground up.
Warm Up
In this section you will warm up by wiring together a hono.js app so that it serves static assets and data from an API endpoint.
Whatever your server-side architecture, every web application will have these bits!
Server Components
The idea behind RSCs is conceptually simple. Instead of requesting JSON data and handing that off to our components to generate the UI, we request the UI itself.
You'll learn how to serialize the UI on the server, stream it to the client, and then convert it to React elements that can be rendered in the browser.
Client Components
To provide a great user experience, we still want to have some client-side interactivity.
Server and client components can be intermixed but there are nuances to how this is accomplished. Once you complete this section you'll understand why server components can render client components but not vice versa.
You'll also see why the "use client" directive is used, and implement the handling of those modules yourself.
Client Router
Learn to build a client-side router that integrates with your React server components.
You'll manage navigation without full page reloads, fetch and display updated UI content from the server, and create smooth transitions with pending UI states. You'll also handle browser history for back/forward button support and implement caching.
Server Actions
This section starts off with implementing the use server directive to designate server action functions and manage their serialization process, which, unlike client components, doesn't require full module serialization.
You'll then build the server-side request handling: extracting action identifiers from RSC headers, utilizing dynamic imports to load the corresponding server-side function, and finally, executing the action and returning the result to the client.
Finally, you'll explore a couple strategies for revalidating your UI after a server action is executed.