React Server Components

Understand React Server Components and Server Actions by building a framework with them using just the Browser, Node.js, and React.

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.