Vite + RSC

This example shows how to set up a React application with Server Component features on Vite using @vitejs/plugin-rsc.

# run dev server
npm run dev

# build for production and preview
npm run build
npm run preview

API usage

See @vitejs/plugin-rsc for the documentation.

• vite.config.ts
  • @vitejs/plugin-rsc/plugin
• ./src/framework/entry.rsc.tsx
  • @vitejs/plugin-rsc/rsc
  • import.meta.viteRsc.loadModule
• ./src/framework/entry.ssr.tsx
  • @vitejs/plugin-rsc/ssr
  • import.meta.viteRsc.loadBootstrapScriptContent
  • rsc-html-stream/server
• ./src/framework/entry.browser.tsx
  • @vitejs/plugin-rsc/browser
  • rsc-html-stream/client

Notes

• ./src/framework/entry.{browser,rsc,ssr}.tsx (with inline comments) provides an overview of how low level RSC (React flight) API can be used to build RSC framework.
• You can use vite-plugin-inspect to understand how "use client" and "use server" directives are transformed internally.

Deployment

See vite-plugin-rsc-deploy-example