feat(rsc): react-router cloudflare single worker example

Author: hi-ogawa

packages/plugin-rsc/examples/react-router/cf/entry.rsc.tsx

@@ -1,9 +1,9 @@
-import { fetchServer } from '../react-router-vite/entry.rsc'
+import handler from '../react-router-vite/entry.rsc'
 
 console.log('[debug:cf-rsc-entry]')
 
 export default {
   fetch(request: Request) {
-    return fetchServer(request)
+    return handler(request)
   },
 }

packages/plugin-rsc/examples/react-router/cf/entry.ssr.tsx

@@ -5,7 +5,7 @@ import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 // import inspect from 'vite-plugin-inspect'
 
-export default defineConfig({
+export default defineConfig((env) => ({
   clearScreen: false,
   build: {
     minify: false,
@@ -17,22 +17,16 @@ export default defineConfig({
     rsc({
       entries: {
         client: './react-router-vite/entry.browser.tsx',
+        ssr: './react-router-vite/entry.ssr.tsx',
       },
       serverHandler: false,
+      loadModuleDevProxy: true,
     }),
     cloudflare({
-      configPath: './cf/wrangler.ssr.jsonc',
+      configPath: './cf/wrangler.jsonc',
       viteEnvironment: {
-        name: 'ssr',
+        name: 'rsc',
       },
-      auxiliaryWorkers: [
-        {
-          configPath: './cf/wrangler.rsc.jsonc',
-          viteEnvironment: {
-            name: 'rsc',
-          },
-        },
-      ],
     }),
   ],
   environments: {
@@ -42,14 +36,24 @@ export default defineConfig({
       },
     },
     ssr: {
-      optimizeDeps: {
-        exclude: ['react-router'],
+      keepProcessEnv: false,
+      build: {
+        outDir: './dist/rsc/ssr',
       },
+      resolve:
+        env.command === 'build'
+          ? {
+              noExternal: true,
+            }
+          : undefined,
+      // optimizeDeps: {
+      //   exclude: ['react-router'],
+      // },
     },
     rsc: {
       optimizeDeps: {
         exclude: ['react-router'],
       },
     },
   },
-})
+}))

packages/plugin-rsc/examples/react-router/cf/vite.config.ts

@@ -1,6 +1,6 @@
 {
   "$schema": "https://www.unpkg.com/[email protected]/config-schema.json",
-  "name": "vite-rsc-react-router-rsc",
+  "name": "vite-rsc-react-router",
   "main": "./entry.rsc.tsx",
   "workers_dev": true,
   "compatibility_date": "2025-04-01",

packages/plugin-rsc/examples/react-router/cf/wrangler.rsc.jsonc renamed to packages/plugin-rsc/examples/react-router/cf/wrangler.jsonc

@@ -9,7 +9,21 @@ import {
 import { unstable_matchRSCServerRequest as matchRSCServerRequest } from 'react-router'
 import { routes } from '../app/routes'
 
-export function fetchServer(request: Request) {
+export default async function handler(request: Request) {
+  // Import the generateHTML function from the client environment
+  const ssr = await import.meta.viteRsc.loadModule<
+    typeof import('./entry.ssr')
+  >('ssr', 'index')
+  const rscResponse = await fetchServer(request)
+  const ssrResponse = await ssr.generateHTML(
+    request.url,
+    request.headers,
+    rscResponse,
+  )
+  return ssrResponse
+}
+
+function fetchServer(request: Request) {
   return matchRSCServerRequest({
     // Provide the React Server touchpoints.
     createTemporaryReferenceSet,

packages/plugin-rsc/examples/react-router/cf/wrangler.ssr.jsonc

@@ -5,15 +5,18 @@ import {
   unstable_RSCStaticRouter as RSCStaticRouter,
 } from 'react-router'
 
+// https://github.com/remix-run/react-router/blob/20d8307d4a51c219f6e13e0b66461e7162d944e4/packages/react-router/lib/rsc/server.ssr.tsx#L95-L102
+
 export async function generateHTML(
-  request: Request,
-  fetchServer: (request: Request) => Promise<Response>,
+  url: string,
+  headers: Headers,
+  rscResponse: Response,
 ): Promise<Response> {
   return await routeRSCServerRequest({
     // The incoming request.
-    request,
+    request: new Request(url, { headers }),
     // How to call the React Server.
-    fetchServer,
+    fetchServer: async () => rscResponse,
     // Provide the React Server touchpoints.
     createFromReadableStream,
     // Render the router to HTML.

packages/plugin-rsc/examples/react-router/react-router-vite/entry.rsc.single.tsx

@@ -17,7 +17,7 @@ export default defineConfig({
       entries: {
         client: './react-router-vite/entry.browser.tsx',
         ssr: './react-router-vite/entry.ssr.tsx',
-        rsc: './react-router-vite/entry.rsc.single.tsx',
+        rsc: './react-router-vite/entry.rsc.tsx',
       },
     }),
   ],

packages/plugin-rsc/examples/react-router/react-router-vite/entry.rsc.tsx

@@ -1,4 +1,11 @@
-import { decode, encode } from 'turbo-stream'
+import {
+  decode,
+  encode,
+  type DecodeOptions,
+  type DecodePlugin,
+  type EncodeOptions,
+  type EncodePlugin,
+} from 'turbo-stream'
 
 type RequestPayload = {
   method: string
@@ -17,6 +24,7 @@ export function createRpcServer<T extends object>(handlers: T) {
     }
     const reqPayload = await decode<RequestPayload>(
       request.body.pipeThrough(new TextDecoderStream()),
+      decodeOptions,
     )
     const handler = (handlers as any)[reqPayload.method]
     if (!handler) {
@@ -31,7 +39,7 @@ export function createRpcServer<T extends object>(handlers: T) {
       resPayload.ok = false
       resPayload.data = e
     }
-    return new Response(encode(resPayload))
+    return new Response(encode(resPayload, encodeOptions))
   }
 }
 
@@ -41,7 +49,9 @@ export function createRpcClient<T>(options: { endpoint: string }): T {
       method,
       args,
     }
-    const body = encode(reqPayload).pipeThrough(new TextEncoderStream())
+    const body = encode(reqPayload, encodeOptions).pipeThrough(
+      new TextEncoderStream(),
+    )
     const res = await fetch(options.endpoint, {
       method: 'POST',
       body,
@@ -55,6 +65,7 @@ export function createRpcClient<T>(options: { endpoint: string }): T {
     }
     const resPayload = await decode<ResponsePayload>(
       res.body.pipeThrough(new TextDecoderStream()),
+      decodeOptions,
     )
     if (!resPayload.ok) {
       throw resPayload.data
@@ -74,3 +85,48 @@ export function createRpcClient<T>(options: { endpoint: string }): T {
     },
   ) as any
 }
+
+const encodePlugin: EncodePlugin = (value) => {
+  if (value instanceof Response) {
+    return [
+      'vite-rsc/response',
+      value.status,
+      value.statusText,
+      [...value.headers],
+      value.body,
+    ]
+  }
+  if (value instanceof Headers) {
+    return ['vite-rsc/headers', [...value]]
+  }
+}
+
+const decodePlugin: DecodePlugin = (type, ...data) => {
+  if (type === 'vite-rsc/response') {
+    const [status, statusText, headers, body] = data as [
+      number,
+      string,
+      [string, string][],
+      ReadableStream<Uint8Array> | null,
+    ]
+    const value = new Response(body, {
+      status,
+      statusText,
+      headers,
+    })
+    return { value }
+  }
+  if (type === 'vite-rsc/headers') {
+    const [headers] = data as [[string, string][]]
+    const value = new Headers(headers)
+    return { value }
+  }
+}
+
+const encodeOptions: EncodeOptions = {
+  plugins: [encodePlugin],
+}
+
+const decodeOptions: DecodeOptions = {
+  plugins: [decodePlugin],
+}