fastify / fastify/fastify-vite
React Server Components (RSC) support for @fastify/react
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 103
- Avg merge
- 6h 54m
- Merged PRs (30d)
- 7
Description
## Background
There was an experimental branch (`react-19-rsc`) implementing React Server Components support for `@fastify/react`. The branch was 9 months stale and never had a PR, but contained substantial implementation work worth revisiting.
## What was implemented
### Core RSC Infrastructure
**1. Client/Server Reference Tracking (`plugin/references.js`)**
- `PluginStateManager` class to track `clientReferenceMap` and `serverReferenceMap`
- `vitePluginUseClient()` - transforms `'use client'` directives into reference registrations
- Uses `@hiogawa/transforms` for directive proxy export transformation
```js
// Input:
'use client'
export function Counter() {}
// Output:
import { $$register } from '/src/react-server.js';
export const Counter = $$register(, 'Counter');
```
**2. RSC Environment (`plugin/env.js`)**
- `createRSCEnvironment()` - sets up Vite environment for RSC builds
- Integration with `createServerModuleRunner` from Vite
**3. Pre-bundled `react-server-dom-webpack`**
- Bundled via rolldown for the RSC runtime
### Starter Template (`starters/react-rsc/`)
Complete example application demonstrating:
- Server-only pages (`pages/server-only.jsx`)
- Client-only pages (`pages/client-only.jsx`)
- Streaming SSR (`pages/streaming.jsx`)
- Server Actions for forms (`pages/actions/form.jsx`)
- Server Actions for data (`pages/actions/data.jsx`)
- Authentication layout pattern (`layouts/auth.jsx`)
- Data fetching (`pages/using-data.jsx`)
- State management (`pages/using-store.jsx`)
### Plugin Modifications
- Modified `plugin/index.js` to handle RSC builds with separate environments
- Added `virtualNormalizeUrlPlugin` and `vitePluginSilenceDirectiveBuildWarning` utilities
- New virtual modules for RSC (`virtual/server.js`, `virtual/index.js`)
## Key Dependencies Used
- `@hiogawa/transforms` - for directive transformation
- `react-server-dom-webpack` - React's RSC runtime
- Vite's Environment API (`createServerModuleRunner`)
## Implementation Considerations
1. **Vite Environment API** - The implementation used Vite's experimental environment API which may have changed
2. **React 19** - Built for React 19 which is now stable
3. **Build complexity** - RSC requires multiple build passes (client, server, RSC)
4. **Bundle size** - Pre-bundled react-server-dom-webpack adds ~3,200 lines
## Next Steps
- [ ] Research current state of Vite's Environment API
- [ ] Review React 19 stable RSC APIs
- [ ] Look at how other frameworks (Next.js, Remix) handle RSC
- [ ] Consider incremental approach: start with `use client` support only
- [ ] Design build pipeline for client/server/RSC bundles
## References
- [React Server Components RFC](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md)
- [Vite Environment API](https://vite.dev/guide/api-environment.html)
- [@hiogawa/transforms](https://github.com/hi-ogawa/vite-plugins)
Contributor guide
Assessment
This issue has not been assessed yet.