91 lines
3.4 KiB
Markdown
91 lines
3.4 KiB
Markdown
# 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:
|
|
|
|
```txt
|
|
react-router/docs/how-to/react-server-components.md
|
|
```
|
|
|
|
Then read the relevant base mode docs:
|
|
|
|
```txt
|
|
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.
|