add a serializable contract between the RSC and SSR environment that matches the Request Response keys instead of relying on them directly.

Author: jacob-ebey

packages/react-router/lib/rsc/env-contract.ts

@@ -0,0 +1,15 @@
+export type RequestContract =
+  | {
+      body?: BodyInit | null;
+      headers?: HeadersInit;
+      method?: string;
+      url: string;
+    }
+  | Request;
+
+export type ResponseContract = {
+  body: ReadableStream<Uint8Array> | null;
+  headers: [string, string][];
+  status: number;
+  statusText: string;
+};

packages/react-router/lib/rsc/server.rsc.ts

@@ -60,6 +60,8 @@ import type {
   ErrorBoundaryProps,
   HydrateFallbackProps,
 } from "../components";
+import type { RequestContract, ResponseContract } from "./env-contract";
+
 const Outlet: typeof OutletType = UNTYPED_Outlet;
 const WithComponentProps: typeof WithComponentPropsType =
   UNSAFE_WithComponentProps;
@@ -374,7 +376,7 @@ export async function matchRSCServerRequest({
   requestContext?: RouterContextProvider;
   loadServerAction?: LoadServerActionFunction;
   onError?: (error: unknown) => void;
-  request: Request;
+  request: RequestContract;
   routes: RSCRouteConfigEntry[];
   generateResponse: (
     match: RSCMatch,
@@ -384,7 +386,7 @@ export async function matchRSCServerRequest({
       temporaryReferences: unknown;
     },
   ) => Response;
-}): Promise<Response> {
+}): Promise<ResponseContract> {
   let requestUrl = new URL(request.url);
 
   const temporaryReferences = createTemporaryReferenceSet();
@@ -397,20 +399,32 @@ export async function matchRSCServerRequest({
       generateResponse,
       temporaryReferences,
     );
-    return response;
+    return {
+      body: response.body,
+      headers: Array.from(response.headers),
+      status: response.status,
+      statusText: response.statusText,
+    };
   }
 
   let isDataRequest = isReactServerRequest(requestUrl);
 
   const url = new URL(request.url);
-  let routerRequest = request;
+  let routerRequest = new Request(request.url, {
+    body: request.body,
+    duplex: request.body ? "half" : undefined,
+    headers: request.headers,
+    method: request.method,
+    signal: "signal" in request ? request.signal : null,
+  } as RequestInit & { duplex?: "half" });
+
   if (isDataRequest) {
     url.pathname = url.pathname.replace(/(_root)?\.rsc$/, "");
     routerRequest = new Request(url.toString(), {
       method: request.method,
       headers: request.headers,
       body: request.body,
-      signal: request.signal,
+      signal: "signal" in request ? request.signal : undefined,
       duplex: request.body ? "half" : undefined,
     } as RequestInit);
   }
@@ -431,14 +445,20 @@ export async function matchRSCServerRequest({
     !leafMatch.route.Component &&
     !leafMatch.route.ErrorBoundary
   ) {
-    return generateResourceResponse(
+    const response = await generateResourceResponse(
       routerRequest,
       routes,
       basename,
       leafMatch.route.id,
       requestContext,
       onError,
     );
+    return {
+      body: response.body,
+      headers: Array.from(response.headers),
+      status: response.status,
+      statusText: response.statusText,
+    };
   }
 
   let response = await generateRenderResponse(
@@ -458,13 +478,18 @@ export async function matchRSCServerRequest({
   // The front end uses this to know whether a 4xx/5xx status came from app code
   // or never reached the origin server
   response.headers.set("X-Remix-Response", "yes");
-  return response;
+  return {
+    body: response.body,
+    headers: Array.from(response.headers),
+    status: response.status,
+    statusText: response.statusText,
+  };
 }
 
 async function generateManifestResponse(
   routes: RSCRouteConfigEntry[],
   basename: string | undefined,
-  request: Request,
+  request: RequestContract,
   generateResponse: (
     match: RSCMatch,
     { temporaryReferences }: { temporaryReferences: unknown },

packages/react-router/lib/rsc/server.ssr.tsx

@@ -10,6 +10,7 @@ import { shouldHydrateRouteLoader } from "../dom/ssr/routes";
 import type { RSCPayload } from "./server.rsc";
 import { createRSCRouteModules } from "./route-modules";
 import { isRouteErrorResponse } from "../router/utils";
+import type { ResponseContract } from "./env-contract";
 
 type DecodedPayload = Promise<RSCPayload> & {
   _deepestRenderedBoundaryId?: string | null;
@@ -72,10 +73,6 @@ export type SSRCreateFromReadableStreamFunction = (
  * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
  * `createFromReadableStream` function, used to decode payloads from the server.
  * @param opts.serverResponse A Response or partial response generated by the [RSC](https://react.dev/reference/rsc/server-components) handler containing a serialized {@link unstable_RSCPayload}.
- * @param opts.serverResponse.body A BodyInit.
- * @param opts.serverResponse.headers A HeadersInit.
- * @param opts.serverResponse.status A status code.
- * @param opts.serverResponse.statusText A status message.
  * @param opts.hydrate Whether to hydrate the server response with the RSC payload.
  * Defaults to `true`.
  * @param opts.renderHTML A function that renders the {@link unstable_RSCPayload} to
@@ -93,12 +90,7 @@ export async function routeRSCServerRequest({
   hydrate = true,
 }: {
   request: Request;
-  serverResponse: {
-    body?: BodyInit | null;
-    headers?: HeadersInit;
-    status?: number;
-    statusText?: string;
-  };
+  serverResponse: ResponseContract;
   createFromReadableStream: SSRCreateFromReadableStreamFunction;
   renderHTML: (
     getPayload: () => DecodedPayload,