React Server Components (RSC)

React Router's RSC support is unstable and exists in two variants:

RSC Framework Mode: Framework Mode with the unstable RSC Vite plugin.
RSC Data Mode: lower-level RSC runtime APIs and manual bundler/server integration.

Use this reference in addition to framework-mode.md or data-mode.md after the main skill identifies an RSC app.

Read the Local RSC Docs

Start with:

react-router/docs/how-to/react-server-components.md

Then read the relevant base mode docs:

react-router/docs/start/framework/
react-router/docs/start/data/

RSC docs may describe differences from non-RSC mode rather than repeating every Framework/Data concept, so keep both layers in mind.

Detect RSC Framework Mode

Look for:

unstable_reactRouterRSC imported from @react-router/dev/vite
@vitejs/plugin-rsc
vite.config.ts with plugins: [reactRouterRSC(), rsc()]
Framework route modules plus RSC route exports
RSC entry files such as entry.rsc

RSC Framework Mode uses a different Vite plugin from non-RSC Framework Mode. Do not swap it for the regular reactRouter() plugin.

Detect RSC Data Mode

Look for:

unstable_RSCRouteConfig
route config passed to lower-level RSC APIs
APIs such as unstable_matchRSCServerRequest, unstable_routeRSCServerRequest, unstable_RSCHydratedRouter, or unstable_RSCStaticRouter
custom bundler/server setup around RSC

RSC Data Mode is more manual than RSC Framework Mode. Match the app's bundler and server abstractions before changing routes or entries.

RSC Route Module Differences

In RSC Framework Mode, many normal Framework Mode concepts still apply, but routes can use server component exports.

Important route-module concepts from the RSC docs include:

ServerComponent instead of the usual client default component
ServerErrorBoundary paired with ErrorBoundary
ServerLayout paired with Layout
ServerHydrateFallback paired with HydrateFallback
server-rendered React elements returned from loaders/actions

A route module cannot export both the normal client component and its server component counterpart for the same role. Read the RSC docs before adding these exports.

Client/Server Boundaries

RSC code must respect React's client/server split:

Use "use client" for components that need hooks, browser APIs, or event handlers.
Use server-only modules for server data access and secrets.
In RSC Framework Mode, prefer the server-only and client-only boundary imports described in the docs.
Do not assume .server/.client file naming works the same way in RSC Framework Mode; read the RSC docs before relying on those conventions.

Data Loading in RSC

RSC changes where data can be loaded:

Server Components can fetch data directly on the server.
Loaders/actions may still exist and can have RSC-specific behavior.
Client components still need client-safe data and cannot directly access server-only modules.

When choosing between a server component fetch, a loader, and a client loader/action, follow the RSC docs and match existing app patterns.

Stability

RSC APIs are explicitly unstable. Before implementing or refactoring RSC code:

Check the installed React Router version.
Check the installed @vitejs/plugin-rsc version.
Read the app's existing RSC entry/config files.
Prefer minimal changes that match current patterns.

3.4 KiB Raw Blame History