RSCs on Cloudflare?

[leebenson]

Is it possible to deploy RR RSC (in either Framework or Data mode) to Cloudflare Workers today?

The official Cloudflare starter doesn't include it, and hunting down a starter template has yielded nothing.

Is the Vite RSC plugin compatible with Cloudflare?

[brookslybrand]

Yes in Data mode!

@jacob-ebey just released https://atgarden.club/ as an RSC example deployed on Cloudflare

The source code is here https://github.com/jacob-ebey/protoflare/tree/main/templates/atgardenclub

[kwkgogo]

https://balloonpopevents.ca/en/ I’ll later release the code.
Hey! I've successfully implemented React Router v7's experimental RSC Framework Mode with SSR on Cloudflare Workers. Here's a quick overview:

Tech Stack

• React 19 + React Router 7 (RSC Framework Mode)
• Cloudflare Workers with Vite
• Paraglide for i18n
• @vitejs/plugin-rsc for RSC support

Implementation

The key configuration:

// vite.config.ts
import { unstable_reactRouterRSC } from '@react-router/dev/vite';
import rsc from '@vitejs/plugin-rsc';
plugins: [
  cloudflare({ viteEnvironment: { name: 'ssr' } }),
  unstable_reactRouterRSC(),
  rsc(),
]
// Cloudflare Workers requires bundling all deps
environments: {
  rsc: { resolve: { noExternal: true } },
  ssr: { resolve: { noExternal: true } },
}
For client hydration, I used the official RSC template with unstable_RSCHydratedRouter.

Challenges & Solutions
Hydration Error: The standard HydratedRouter doesn't work with RSC. Fixed by switching to unstable_RSCHydratedRouter with createFromReadableStream from @vitejs/plugin-rsc/browser.
i18n Locale Flicker: SSR was returning wrong lang attribute. Fixed by creating a custom 
entry.ssr.tsx
 that wraps RSC rendering in Paraglide's AsyncLocalStorage context for proper locale detection.
<Scripts /> Warning: In RSC mode, scripts are auto-injected. Removed <Scripts /> from 
root.tsx
 to eliminate the warning.
The app now renders Server Components on Cloudflare Workers with selective client hydration. Performance metrics: TTFB ~55ms (warm cache), 736KB client bundle with code splitting.

Happy to share more details if needed!

[okalil]

@kwkgogo Hey! Could you share the configuration for the worker file? Applying the changes you described I still get a vite runtime error: Cannot find module 'virtual:react-router/server-build' imported from '.../path/to/worker'.
And during build I also see: "useFetcher" is not exported by "node_modules/.pnpm/react-router", from a route file that imports that hook. Did you run into either of these?

[leebenson]

Oh, that's incredible, thanks for sharing @brookslybrand - will take a look today!

[quanghle]

The vite-plugin-react official package has an example for this.

https://github.com/vitejs/vite-plugin-react/tree/0d3912b73d3aa1dc8f64619c82b3dacb0769e49e/packages/plugin-rsc/examples/react-router

# run on @cloudflare/vite-plugin and deploy.
# a separate configuration is found in ./cf/vite.config.ts
npm run cf-dev
npm run cf-build
npm run cf-preview
npm run cf-release

[Macil]

It's slightly awkward that this method deploys a project as two separate Cloudflare workers (one using the other through a service binding).

[edmundhung]

I am just testing it out today and got it working in https://github.com/edmundhung/cloudflare-react-router-rsc

[Macil]

Thanks for this! However I've experienced two issues with this example:

1. When using npm run dev, on the first page load there are errors about "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ..." and "[vite] Internal server error: Cannot read properties of null (reading 'useContext')". These errors go away some time after the first load and don't return on future runs unless the node_modules/.vite directory is removed.
2. I'm not able to get this to work with durable objects at all in npm run preview mode.

I got durable objects working in npm run dev by setting wrangler.json's main to "./app/entry.rsc.tsx" and I created that file with this content:

export { default } from "@react-router/dev/config/default-rsc-entries/entry.rsc";
import { DurableObject } from "cloudflare:workers";

export class MyDurableObject extends DurableObject<Env> {
  constructor(ctx: DurableObjectState, env: Env) {
    super(ctx, env)
  }
  foo() {
    return "bar";
  }
}

But when I use npm run preview, I get this error:

error when starting preview server:
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'cloudflare:'
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:195:11)
    at defaultLoad (node:internal/modules/esm/load:78:3)
    at nextLoad (node:internal/modules/esm/hooks:785:28)
    at AsyncLoaderHooksOnLoaderHookWorker.load (node:internal/modules/esm/hooks:410:26)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:251:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:845:20)
    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

I thought that sticking build: { rollupOptions: { external: ["cloudflare:workers"] } } in vite.config.ts might solve this issue but it did not.

[edmundhung]

I think you can workaround it with the following config:

import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
    plugins: [
        cloudflare({
            viteEnvironment: {
                name: "rsc",
                childEnvironments: ["ssr"],
            },
        }),
        // ... keep existing plugins, but update rsc():
        rsc({ serverHandler: false }),
    ],
    environments: {
        rsc: {
            optimizeDeps: {
                exclude: ["react-router"],
            },
        },
        ssr: {
            optimizeDeps: {
                exclude: ["react-router"],
            },
        },
    },
});

There are definitely some interops between Cloudflare, RSC and React Router to nail down how to configure this on behalf of the users. But hopefully this is enough to get you going.

I've also updated the template with these workarounds: https://github.com/edmundhung/cloudflare-react-router-rsc/blob/7156d5ab557b33ad1841d327cd7818a4d4b96ea6/vite.config.ts

[Macil]

Thanks, this works pretty well now!