Skip to content

server

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

server

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
package.json
package.json
 
 
rsbuild.config.ts
rsbuild.config.ts
 
 
server.js
server.js
 
 
tsconfig.json
tsconfig.json
 
 

README.md

Rsbuild RSC Server Entrypoint Example

This example demonstrates a server-driven React app built with Rsbuild and React Server Components (RSC). The project showcases how Rsbuild enables server-side routing, initial HTML rendering, client-side hydration, and React Server Actions for data mutations. The codebase is adapted from a community RSC example, now fully integrated with Rsbuild’s architecture and build system.

Project Structure

The example consists of the following main files:

src/framework/entry.rsc.tsx

This is the main React Server Components entrypoint. It is compiled by Rsbuild with the react-server-components layer, enabling RSC features and server-only code execution.

src/framework/entry.ssr.tsx

This is the SSR entrypoint, also compiled by Rsbuild but with the server-side-rendering layer. It handles initial HTML rendering and subsequent RSC requests from the client.

src/framework/entry.client.tsx

The main client entrypoint, imported from each page. Rsbuild generates the client bundle from this file, enabling client-side hydration and navigation.

src/Todos.tsx

The root React Server Component that renders the <html> element, server content, and any client components. It uses the Rsbuild-specific "use server-entry" directive to create a code-splitting entrypoint. Rsbuild extracts common dependencies into shared bundles for efficient loading.

src/actions.ts

A server actions file. Functions exported here are marked with the "use server" directive. Rsbuild places these actions in the server bundle and generates client proxies to call them via the handler in entry.client.tsx.

src/TodoItem.tsx and src/Dialog.tsx

Client components:

  • TodoItem.tsx: A client component that renders a todo list item. It uses useOptimistic for instant UI feedback and calls server actions (setTodoComplete, deleteTodo) for state changes.
  • Dialog.tsx: A client component that renders a modal dialog using client APIs. It is used to display the create-todo form (a server component) as its children.

server.mjs

Custom Rsbuild server entrypoint. Uses Express to handle HTTP routing and integrates Rsbuild’s dev server and middleware. For each route, it invokes Rsbuild’s SSR API to render React Server Components or handle server actions. The server supports both HTML and RSC payload responses, hot reload via WebSocket, and graceful fallback to client-side rendering on SSR errors.

How Rsbuild Implements RSC and SSR

Initial HTML Rendering

  • The server uses Express to handle routing.
  • For each route, it calls Rsbuild’s SSR API to render the root component to HTML or an RSC payload, depending on the Accept header.
  • The initial HTML embeds the RSC payload for seamless hydration on the client.

Client-Side Hydration and Routing

  • The client bundle, generated by Rsbuild, hydrates the initial HTML using the embedded RSC payload.
  • A simple client-side router listens for link clicks and browser navigation events.
  • For client-side navigations, the router fetches new RSC payloads from the server and updates the page without a full reload.

Server Actions

  • Server actions are defined in src/actions.ts with the "use server" directive.
  • Rsbuild generates client proxies for these actions, allowing them to be called directly from client components or as HTML form targets.
  • When invoked, the client sends a POST request with the action ID and arguments. The server executes the action and returns a new RSC payload and the action result.
  • The client updates the UI with the new payload and returns the result to the caller.