Vite RSC Experiments

Discussions

Forum: GitHUb Discussions.
Chat: Discord.

Goals

Short term

Wire together all the pieces needed to build a proper app using vite and RSC. Implement the necessary router, bundler plugins and build setup to get an SSR'ed React app with RSC.

Long term

Eventually we want extract the pieces into modular parts for other vite based frameworks to use. So, implement a Vite plugin for React Server Components.

Ideally hitting the sweet spot between full-fledged yet flexible. Can we design the plugin so that it works with Wakuwork, Astro, Rakkas, and vite-plugin-ssr?

Things to do

Rendering

Server side rendering for RSC (pass initial RSC stream to React's streaming server renderer)
Hydrate server rendered HTML stream with client side RSC stream
Inline Server components stream data to SSRed HTML stream and use that for hydration
Render full HTML page with React components

Routing

Client side navigation for path
Client side navigation for search params
Proper route matching with path params
Nested routing
- Nested routing on the server (using children prop)
- Nested navigation on the client, i.e, only request RSC for the nested route
Typed router (ala tanstack router)
File system routing

Mutations

Server functions, ala "use server"

Mutations via server functions

API: useMutation hook

function Component({ action }) {
  let mutate = useMutation()
  function handleClick() {
    mutate(() => action())
  }
}

Throw error to nearest ErrorBoundary
Forms
- Form submission
- Form redirects
- Form validation
- Form submission error handling

Head tags

Manage metadata/head tags

CSS/Styling

Inline CSS to avoid FOUC
- Inline imported CSS files in RSC components
- Inline imported CSS files in client components
- Inline imported CSS Module files
- Try to avoid having to send styles as hydration data
Build CSS manifest (importing CSS files)

Build

Build
Build-time routing (static RSC output)

How to run

Currently, the main attraction is the Contacts Demo. To run:

pnpm install # at root
cd examples/contacts
pnpm dev

Structure

app: User code
- root.tsx: Root server component, declares routes and renders matched route
- Other server/client components
modules: Framework modules
- vite: Vite plugins for RSC and integrating Hattip
- router: Main framework
  - server.ts: Server handler, /__rsc endpoint for RSC stream, and other endpoints are per user's routing
  - client.ts: Client side router, handles navigation and hydration

Prior Art

Existing implementations:

facebook/react#22952 (Shopify's Hydrogen implementation)
https://github.com/dai-shi/wakuwork
https://github.com/bholmesdev/simple-rsc (with video of live code stream with Dan Abramov)
https://github.com/cyco130/vite-rsc (this repo)
https://github.com/parcel-bundler/parcel/commits/rsc
Next.js's implementation (PR welcome to add a link to its code)
Remix Router/React Router Related:
https://github.com/Ephem/rollup-plugin-preserve-directives

gabrielcsapo / vite-rsc