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