fastify / fastify/fastify-vite

React Server Components (RSC) support for @fastify/react

Open
#365 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.