Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions packages/plugin-rsc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -555,6 +555,48 @@ and React client environments in the browser.

## Tips

### Stable client chunks

You can use Rollup's `manualChunks` option to keep React and Vite runtime code in stable client chunks. This allows browsers to reuse these chunks when application code changes.

```ts
import { fileURLToPath } from 'node:url'
import rsc from '@vitejs/plugin-rsc'
import { defineConfig, normalizePath } from 'vite'

const reactServerDom = normalizePath(
fileURLToPath(import.meta.resolve('@vitejs/plugin-rsc/react/browser')),
)

export default defineConfig({
plugins: [rsc()],
environments: {
client: {
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (
id.includes('/node_modules/react/') ||
id.includes('/node_modules/react-dom/') ||
id.includes(reactServerDom)
) {
return 'lib-react'
}
if (id === '\0vite/preload-helper.js') {
return 'lib-vite'
}
},
},
},
},
},
},
})
```

Use the functional form of `manualChunks` so the React Server Components runtime is included even when the CommonJS plugin adds a proxy suffix to its module ID, such as `?commonjs-es-import`.

### CSS Support

The plugin automatically handles CSS code-splitting and injection for server components. This eliminates the need to manually call [`import.meta.viteRsc.loadCss()`](#importmetaviterscloadcss) in most cases.
Expand Down