feat: unstable RSC templates (#139)

Co-authored-by: Brooks Lybrand <[email protected]>
Co-authored-by: Hiroshi Ogawa <[email protected]>

Author: 3 people

.gitignore

@@ -3,3 +3,5 @@
 
 # https://github.com/netlify/cli/issues/6958
 .netlify
+# Parcel cache
+.parcel-cache

pnpm-lock.yaml

@@ -9,3 +9,5 @@ packages:
   - "node-custom-server"
   - "node-postgres"
   - "vercel"
+  - "unstable_rsc-parcel"
+  - "unstable_rsc-vite"

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+.DS_Store
+.parcel-cache
+node_modules
+dist

unstable_rsc-parcel/.gitignore

@@ -0,0 +1,51 @@
+{
+  "private": true,
+  "targets": {
+    "react-server": {
+      "context": "react-server",
+      "source": "src/entry.rsc.tsx",
+      "scopeHoist": false,
+      "includeNodeModules": {
+        "@mjackson/node-fetch-server": false,
+        "compression": false,
+        "express": false
+      }
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "@tailwindcss/postcss": {}
+    }
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development parcel --no-autoinstall --no-cache",
+    "build": "parcel build --no-autoinstall",
+    "start": "cross-env NODE_ENV=production node dist/server/entry.rsc.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@mjackson/node-fetch-server": "0.7.0",
+    "@parcel/runtime-rsc": "^2.15.4",
+    "buffer": "^6.0.3",
+    "compression": "^1.8.0",
+    "cross-env": "^7.0.3",
+    "express": "^5.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-router": "7.7.0",
+    "react-server-dom-parcel": "19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/typography": "0.5.16",
+    "@types/compression": "^1.8.1",
+    "@types/express": "^5.0.3",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "parcel": "^2.15.4",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.8.3"
+  }
+}

unstable_rsc-parcel/package.json

@@ -0,0 +1,48 @@
+"use client-entry";
+
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import {
+  unstable_createCallServer as createCallServer,
+  unstable_getRSCStream as getRSCStream,
+  unstable_RSCHydratedRouter as RSCHydratedRouter,
+  type unstable_RSCPayload as RSCServerPayload,
+} from "react-router";
+import {
+  createFromReadableStream,
+  createTemporaryReferenceSet,
+  encodeReply,
+  setServerCallback,
+  // @ts-expect-error - no types for this yet
+} from "react-server-dom-parcel/client";
+
+// Create and set the callServer function to support post-hydration server actions.
+setServerCallback(
+  createCallServer({
+    createFromReadableStream,
+    createTemporaryReferenceSet,
+    encodeReply,
+  }),
+);
+
+// Get and decode the initial server payload
+createFromReadableStream(getRSCStream()).then((payload: RSCServerPayload) => {
+  startTransition(async () => {
+    const formState =
+      payload.type === "render" ? await payload.formState : undefined;
+
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RSCHydratedRouter
+          createFromReadableStream={createFromReadableStream}
+          payload={payload}
+        />
+      </StrictMode>,
+      {
+        // @ts-expect-error - no types for this yet
+        formState,
+      },
+    );
+  });
+});

unstable_rsc-parcel/public/favicon.ico

@@ -0,0 +1,74 @@
+import { createRequestListener } from "@mjackson/node-fetch-server";
+import compression from "compression";
+import express from "express";
+import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router";
+import {
+  createTemporaryReferenceSet,
+  decodeAction,
+  decodeFormState,
+  decodeReply,
+  loadServerAction,
+  renderToReadableStream,
+  // @ts-expect-error - no types for this yet
+} from "react-server-dom-parcel/server.edge";
+
+// Import the generateHTML function from the client environment
+import { generateHTML } from "./entry.ssr" with { env: "react-client" };
+import { routes } from "./routes/config";
+
+function fetchServer(request: Request) {
+  return matchRSCServerRequest({
+    // Provide the React Server touchpoints.
+    createTemporaryReferenceSet,
+    decodeAction,
+    decodeFormState,
+    decodeReply,
+    loadServerAction,
+    // The incoming request.
+    request,
+    // The app routes.
+    routes: routes(),
+    // Encode the match with the React Server implementation.
+    generateResponse(match) {
+      return new Response(renderToReadableStream(match.payload), {
+        status: match.statusCode,
+        headers: match.headers,
+      });
+    },
+  });
+}
+
+const app = express();
+
+// Serve static assets with compression and long cache lifetime.
+app.use(
+  "/client",
+  compression(),
+  express.static("dist/client", {
+    immutable: true,
+    maxAge: "1y",
+  })
+);
+app.use(compression(), express.static("public"));
+
+// Ignore Chrome extension requests.
+app.get("/.well-known/appspecific/com.chrome.devtools.json", (_, res) => {
+  res.status(404);
+  res.end();
+});
+
+// Hookup our application.
+app.use(
+  createRequestListener((request) =>
+    generateHTML(
+      request,
+      fetchServer,
+      (routes as unknown as { bootstrapScript?: string }).bootstrapScript
+    )
+  )
+);
+
+const PORT = Number.parseInt(process.env.PORT || "3000");
+app.listen(PORT, () => {
+  console.log(`Server listening on port ${PORT} (http://localhost:${PORT})`);
+});

unstable_rsc-parcel/src/entry.browser.tsx

@@ -0,0 +1,37 @@
+import { renderToReadableStream as renderHTMLToReadableStream } from "react-dom/server.edge";
+import {
+  unstable_routeRSCServerRequest as routeRSCServerRequest,
+  unstable_RSCStaticRouter as RSCStaticRouter,
+} from "react-router";
+// @ts-expect-error - no types for this yet
+import { createFromReadableStream } from "react-server-dom-parcel/client.edge";
+
+export async function generateHTML(
+  request: Request,
+  fetchServer: (request: Request) => Promise<Response>,
+  bootstrapScriptContent: string | undefined,
+): Promise<Response> {
+  return await routeRSCServerRequest({
+    // The incoming request.
+    request,
+    // How to call the React Server.
+    fetchServer,
+    // Provide the React Server touchpoints.
+    createFromReadableStream,
+    // Render the router to HTML.
+    async renderHTML(getPayload) {
+      const payload = await getPayload();
+      const formState =
+        payload.type === "render" ? await payload.formState : undefined;
+
+      return await renderHTMLToReadableStream(
+        <RSCStaticRouter getPayload={getPayload} />,
+        {
+          bootstrapScriptContent,
+          // @ts-expect-error - no types for this yet
+          formState,
+        },
+      );
+    },
+  });
+}

unstable_rsc-parcel/src/entry.rsc.tsx

@@ -0,0 +1,10 @@
+export default function About() {
+  return (
+    <main className="mx-auto max-w-screen-xl px-4 py-8 lg:py-12">
+      <article className="prose mx-auto">
+        <h1>About Page</h1>
+        <p>This is the about page of our application.</p>
+      </article>
+    </main>
+  );
+}