vitejs · hi-ogawa · Oct 23, 2025 · Oct 21, 2025 · Oct 21, 2025 · Oct 21, 2025
diff --git a/packages/plugin-rsc/e2e/browser.test.ts b/packages/plugin-rsc/e2e/browser.test.ts
@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test'
+import { useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+import path from 'node:path'
+import fs from 'node:fs'
+
+// Webkit fails by
+// > TypeError: ReadableByteStreamController is not implemented
+test.skip(({ browserName }) => browserName === 'webkit')
+
+test.describe('dev-browser', () => {
+  const f = useFixture({ root: 'examples/browser', mode: 'dev' })
+  defineStarterTest(f, 'no-ssr')
+})
+
+test.describe('build-browser', () => {
+  const f = useFixture({ root: 'examples/browser', mode: 'build' })
+  defineStarterTest(f, 'no-ssr')
+
+  test('no ssr build', () => {
+    expect(fs.existsSync(path.join(f.root, 'dist/ssr'))).toBe(false)
+  })
+})
diff --git a/packages/plugin-rsc/examples/browser/README.md b/packages/plugin-rsc/examples/browser/README.md
@@ -0,0 +1,3 @@
+# `rsc` environment on browser
+
+See also https://github.com/hi-ogawa/vite-rsc-browser-example/
diff --git a/packages/plugin-rsc/examples/browser/index.html b/packages/plugin-rsc/examples/browser/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>RSC on Browser</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <script async type="module" src="/src/framework/entry.browser.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/plugin-rsc/examples/browser/lib/dev-proxy.ts b/packages/plugin-rsc/examples/browser/lib/dev-proxy.ts
@@ -0,0 +1,32 @@
+import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+
+const runner = new ModuleRunner(
+  {
+    sourcemapInterceptor: false,
+    transport: {
+      invoke: async (payload) => {
+        const response = await fetch(
+          '/@vite/invoke-rsc?' +
+            new URLSearchParams({
+              data: JSON.stringify(payload),
+            }),
+        )
+        return response.json()
+      },
+    },
+    hmr: false,
+  },
+  new ESModulesEvaluator(),
+)
+
+export default new Proxy(
+  {},
+  {
+    get(_target, p, _receiver) {
+      return async (...args: any[]) => {
+        const module = await runner.import('/src/framework/entry.rsc')
+        return module.default[p](...args)
+      }
+    },
+  },
+)
diff --git a/packages/plugin-rsc/examples/browser/lib/plugin.ts b/packages/plugin-rsc/examples/browser/lib/plugin.ts
@@ -0,0 +1,105 @@
+import { rmSync } from 'node:fs'
+import path from 'node:path'
+import { normalizePath, type Plugin } from 'vite'
+
+export default function vitePluginRscBrowser(): Plugin[] {
+  return [
+    {
+      name: 'rsc-browser',
+      config() {
+        return {
+          appType: 'spa',
+          environments: {
+            client: {
+              build: {
+                emptyOutDir: false,
+              },
+            },
+            // TODO: server build is not hashed
+            rsc: {
+              build: {
+                outDir: 'dist/client/__server',
+              },
+              keepProcessEnv: false,
+              resolve: {
+                noExternal: true,
+              },
+              optimizeDeps: {
+                esbuildOptions: {
+                  platform: 'neutral',
+                },
+              },
+            },
+          },
+          rsc: {
+            serverHandler: false,
+          },
+        }
+      },
+      configResolved(config) {
+        // avoid globalThis.AsyncLocalStorage injection in browser mode
+        const plugin = config.plugins.find(
+          (p) => p.name === 'rsc:inject-async-local-storage',
+        )
+        delete plugin!.transform
+      },
+      buildApp: {
+        order: 'pre',
+        async handler() {
+          // clean up nested outDir
+          rmSync('./dist', { recursive: true, force: true })
+        },
+      },
+      configureServer(server) {
+        server.middlewares.use(async (req, res, next) => {
+          const url = new URL(req.url ?? '/', 'https://any.local')
+          if (url.pathname === '/@vite/invoke-rsc') {
+            const payload = JSON.parse(url.searchParams.get('data')!)
+            const result =
+              await server.environments['rsc']!.hot.handleInvoke(payload)
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify(result))
+            return
+          }
+          next()
+        })
+      },
+    },
+    {
+      name: 'rsc-browser:load-rsc',
+      resolveId(source) {
+        if (source === 'virtual:vite-rsc-browser/load-rsc') {
+          if (this.environment.mode === 'dev') {
+            return this.resolve('/lib/dev-proxy')
+          }
+          return { id: source, external: true }
+        }
+      },
+      renderChunk(code, chunk) {
+        if (code.includes('virtual:vite-rsc-browser/load-rsc')) {
+          const config = this.environment.getTopLevelConfig()
+          const replacement = normalizeRelativePath(
+            path.relative(
+              path.join(
+                config.environments.client.build.outDir,
+                chunk.fileName,
+                '..',
+              ),
+              path.join(config.environments.rsc.build.outDir, 'index.js'),
+            ),
+          )
+          code = code.replaceAll(
+            'virtual:vite-rsc-browser/load-rsc',
+            () => replacement,
+          )
+          return { code }
+        }
+      },
+    },
+  ]
+}
+
+function normalizeRelativePath(s: string): string {
+  s = normalizePath(s)
+  return s[0] === '.' ? s : './' + s
+}
diff --git a/packages/plugin-rsc/examples/browser/lib/runtime.ts b/packages/plugin-rsc/examples/browser/lib/runtime.ts
@@ -0,0 +1,3 @@
+export function loadEntryRsc() {
+  return import('virtual:vite-rsc-browser/load-rsc' as any)
+}
diff --git a/packages/plugin-rsc/examples/browser/package.json b/packages/plugin-rsc/examples/browser/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@vitejs/plugin-rsc-examples-browser",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
+    "vite": "^7.1.10"
+  }
+}
diff --git a/packages/plugin-rsc/examples/browser/public/vite.svg b/packages/plugin-rsc/examples/browser/public/vite.svg
diff --git a/packages/plugin-rsc/examples/browser/src/action.tsx b/packages/plugin-rsc/examples/browser/src/action.tsx
@@ -0,0 +1,11 @@
+'use server'
+
+let serverCounter = 0
+
+export async function getServerCounter() {
+  return serverCounter
+}
+
+export async function updateServerCounter(change: number) {
+  serverCounter += change
+}
diff --git a/packages/plugin-rsc/examples/browser/src/assets/react.svg b/packages/plugin-rsc/examples/browser/src/assets/react.svg
diff --git a/packages/plugin-rsc/examples/browser/src/client.tsx b/packages/plugin-rsc/examples/browser/src/client.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import React from 'react'
+
+export function ClientCounter() {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <button onClick={() => setCount((count) => count + 1)}>
+      Client Counter: {count}
+    </button>
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser/src/framework/entry.browser.tsx b/packages/plugin-rsc/examples/browser/src/framework/entry.browser.tsx
@@ -0,0 +1,135 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  createFromFetch,
+  setServerCallback,
+  createTemporaryReferenceSet,
+  encodeReply,
+} from '@vitejs/plugin-rsc/browser'
+import type { RscPayload } from './entry.rsc'
+import { loadEntryRsc } from '../../lib/runtime'
+
+async function fetchRsc(request: Request): Promise<Response> {
+  const module = await loadEntryRsc()
+  return module.default.fetch(request)
+}
+
+async function main() {
+  // stash `setPayload` function to trigger re-rendering
+  // from outside of `BrowserRoot` component (e.g. server function call, navigation, hmr)
+  let setPayload: (v: RscPayload) => void
+
+  const initialPayload = await createFromFetch<RscPayload>(
+    fetchRsc(new Request(window.location.href)),
+  )
+
+  // browser root component to (re-)render RSC payload as state
+  function BrowserRoot() {
+    const [payload, setPayload_] = React.useState(initialPayload)
+
+    React.useEffect(() => {
+      setPayload = (v) => React.startTransition(() => setPayload_(v))
+    }, [setPayload_])
+
+    // re-fetch/render on client side navigation
+    React.useEffect(() => {
+      return listenNavigation(() => fetchRscPayload())
+    }, [])
+
+    return payload.root
+  }
+
+  // re-fetch RSC and trigger re-rendering
+  async function fetchRscPayload() {
+    const payload = await createFromFetch<RscPayload>(
+      fetchRsc(new Request(window.location.href)),
+    )
+    setPayload(payload)
+  }
+
+  // register a handler which will be internally called by React
+  // on server function request after hydration.
+  setServerCallback(async (id, args) => {
+    const url = new URL(window.location.href)
+    const temporaryReferences = createTemporaryReferenceSet()
+    const payload = await createFromFetch<RscPayload>(
+      fetchRsc(
+        new Request(url, {
+          method: 'POST',
+          body: await encodeReply(args, { temporaryReferences }),
+          headers: {
+            'x-rsc-action': id,
+          },
+        }),
+      ),
+      { temporaryReferences },
+    )
+    setPayload(payload)
+    return payload.returnValue
+  })
+
+  // hydration
+  const browserRoot = (
+    <React.StrictMode>
+      <BrowserRoot />
+    </React.StrictMode>
+  )
+  createRoot(document.body).render(browserRoot)
+
+  // implement server HMR by trigering re-fetch/render of RSC upon server code change
+  if (import.meta.hot) {
+    import.meta.hot.on('rsc:update', () => {
+      fetchRscPayload()
+    })
+  }
+}
+
+// a little helper to setup events interception for client side navigation
+function listenNavigation(onNavigation: () => void) {
+  window.addEventListener('popstate', onNavigation)
+
+  const oldPushState = window.history.pushState
+  window.history.pushState = function (...args) {
+    const res = oldPushState.apply(this, args)
+    onNavigation()
+    return res
+  }
+
+  const oldReplaceState = window.history.replaceState
+  window.history.replaceState = function (...args) {
+    const res = oldReplaceState.apply(this, args)
+    onNavigation()
+    return res
+  }
+
+  function onClick(e: MouseEvent) {
+    let link = (e.target as Element).closest('a')
+    if (
+      link &&
+      link instanceof HTMLAnchorElement &&
+      link.href &&
+      (!link.target || link.target === '_self') &&
+      link.origin === location.origin &&
+      !link.hasAttribute('download') &&
+      e.button === 0 && // left clicks only
+      !e.metaKey && // open in new tab (mac)
+      !e.ctrlKey && // open in new tab (windows)
+      !e.altKey && // download
+      !e.shiftKey &&
+      !e.defaultPrevented
+    ) {
+      e.preventDefault()
+      history.pushState(null, '', link.href)
+    }
+  }
+  document.addEventListener('click', onClick)
+
+  return () => {
+    document.removeEventListener('click', onClick)
+    window.removeEventListener('popstate', onNavigation)
+    window.history.pushState = oldPushState
+    window.history.replaceState = oldReplaceState
+  }
+}
+
+main()
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# `rsc` environment on browser

		See also https://github.com/hi-ogawa/vite-rsc-browser-example/