feat(rsc): routeRSCServerRequest replace fetchServer with serverResponse (#14597)

Author: jacob-ebey

.changeset/plenty-kiwis-matter.md

@@ -0,0 +1,6 @@
+---
+"@react-router/dev": minor
+"react-router": minor
+---
+
+routeRSCServerRequest replace fetchServer with serverResponse

docs/api/rsc/RSCStaticRouter.md

@@ -6,7 +6,7 @@ unstable: true
 # unstable_RSCStaticRouter
 
 <!--
-⚠️ ⚠️ IMPORTANT ⚠️ ⚠️ 
+⚠️ ⚠️ IMPORTANT ⚠️ ⚠️
 
 Thank you for helping improve our documentation!
 
@@ -22,8 +22,8 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/rs
 <br />
 <br />
 
-<docs-warning>This API is experimental and subject to breaking changes in 
-minor/patch releases. Please use with caution and pay **very** close attention 
+<docs-warning>This API is experimental and subject to breaking changes in
+minor/patch releases. Please use with caution and pay **very** close attention
 to release notes for relevant changes.</docs-warning>
 
 ## Summary
@@ -43,7 +43,7 @@ import {
 
 routeRSCServerRequest({
   request,
-  fetchServer,
+  serverResponse,
   createFromReadableStream,
   async renderHTML(getPayload) {
     const payload = getPayload();
@@ -53,7 +53,7 @@ routeRSCServerRequest({
       {
         bootstrapScriptContent,
         formState: await payload.formState,
-      }
+      },
     );
   },
 });
@@ -62,7 +62,9 @@ routeRSCServerRequest({
 ## Signature
 
 ```tsx
-function RSCStaticRouter({ getPayload }: RSCStaticRouterProps)
+function RSCStaticRouter({
+  getPayload,
+}: RSCStaticRouterProps);
 ```
 
 ## Props
@@ -71,4 +73,3 @@ function RSCStaticRouter({ getPayload }: RSCStaticRouterProps)
 
 A function that starts decoding of the [`unstable_RSCPayload`](https://api.reactrouter.com/v7/types/react_router.unstable_RSCPayload.html). Usually passed
 through from [`unstable_routeRSCServerRequest`](../rsc/routeRSCServerRequest)'s `renderHTML`.
-

docs/api/rsc/routeRSCServerRequest.md

@@ -6,7 +6,7 @@ unstable: true
 # unstable_routeRSCServerRequest
 
 <!--
-⚠️ ⚠️ IMPORTANT ⚠️ ⚠️ 
+⚠️ ⚠️ IMPORTANT ⚠️ ⚠️
 
 Thank you for helping improve our documentation!
 
@@ -22,8 +22,8 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/rs
 <br />
 <br />
 
-<docs-warning>This API is experimental and subject to breaking changes in 
-minor/patch releases. Please use with caution and pay **very** close attention 
+<docs-warning>This API is experimental and subject to breaking changes in
+minor/patch releases. Please use with caution and pay **very** close attention
 to release notes for relevant changes.</docs-warning>
 
 ## Summary
@@ -45,7 +45,7 @@ import {
 
 routeRSCServerRequest({
   request,
-  fetchServer,
+  serverResponse,
   createFromReadableStream,
   async renderHTML(getPayload) {
     const payload = getPayload();
@@ -55,7 +55,7 @@ routeRSCServerRequest({
       {
         bootstrapScriptContent,
         formState: await payload.formState,
-      }
+      },
     );
   },
 });
@@ -66,19 +66,21 @@ routeRSCServerRequest({
 ```tsx
 async function routeRSCServerRequest({
   request,
-  fetchServer,
+  serverResponse,
   createFromReadableStream,
   renderHTML,
   hydrate = true,
 }: {
   request: Request;
-  fetchServer: (request: Request) => Promise<Response>;
+  serverResponse: Response;
   createFromReadableStream: SSRCreateFromReadableStreamFunction;
   renderHTML: (
     getPayload: () => DecodedPayload,
-  ) => ReadableStream<Uint8Array> | Promise<ReadableStream<Uint8Array>>;
+  ) =>
+    | ReadableStream<Uint8Array>
+    | Promise<ReadableStream<Uint8Array>>;
   hydrate?: boolean;
-}): Promise<Response>
+}): Promise<Response>;
 ```
 
 ## Params
@@ -87,10 +89,9 @@ async function routeRSCServerRequest({
 
 Your `react-server-dom-xyz/client`'s `createFromReadableStream` function, used to decode payloads from the server.
 
-### opts.fetchServer
+### opts.serverResponse
 
-A function that forwards a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) to the [RSC](https://react.dev/reference/rsc/server-components) handler
-and returns a `Promise<Response>` containing a serialized [`unstable_RSCPayload`](https://api.reactrouter.com/v7/types/react_router.unstable_RSCPayload.html).
+A Response from the [RSC](https://react.dev/reference/rsc/server-components) handler containing a serialized [`unstable_RSCPayload`](https://api.reactrouter.com/v7/types/react_router.unstable_RSCPayload.html).
 
 ### opts.hydrate
 
@@ -109,4 +110,3 @@ The request to route.
 A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
 that either contains the [RSC](https://react.dev/reference/rsc/server-components)
 payload for data requests, or renders the HTML for document requests.
-

docs/how-to/react-server-components.md

@@ -634,14 +634,14 @@ import { createFromReadableStream } from "react-server-dom-parcel/client.edge";
 
 export async function generateHTML(
   request: Request,
-  fetchServer: (request: Request) => Promise<Response>,
+  serverResponse: Response,
   bootstrapScriptContent: string | undefined,
 ): Promise<Response> {
   return await routeRSCServerRequest({
     // The incoming request.
     request,
-    // How to call the React Server.
-    fetchServer,
+    // The React Server response.
+    serverResponse,
     // Provide the React Server touchpoints.
     createFromReadableStream,
     // Render the router to HTML.
@@ -722,7 +722,7 @@ app.use(
   createRequestListener((request) =>
     generateHTML(
       request,
-      fetchServer,
+      await fetchServer(request),
       (routes as unknown as { bootstrapScript?: string })
         .bootstrapScript,
     ),
@@ -864,13 +864,13 @@ import {
 
 export async function generateHTML(
   request: Request,
-  fetchServer: (request: Request) => Promise<Response>,
+  serverResponse: Response,
 ): Promise<Response> {
   return await routeRSCServerRequest({
     // The incoming request.
     request,
-    // How to call the React Server.
-    fetchServer,
+    // The React Server response
+    serverResponse,
     // Provide the React Server touchpoints.
     createFromReadableStream,
     // Render the router to HTML.
@@ -942,7 +942,7 @@ export default async function handler(request: Request) {
     typeof import("./entry.ssr")
   >("ssr", "index");
 
-  return ssr.generateHTML(request, fetchServer);
+  return ssr.generateHTML(request, await fetchServer(request));
 }
 ```
 

integration/helpers/rsc-parcel/src/prerender.tsx

@@ -9,14 +9,14 @@ import { createFromReadableStream } from "react-server-dom-parcel/client.edge";
 
 export async function prerender(
   request: Request,
-  fetchServer: (request: Request) => Promise<Response>,
+  serverResponse: Response,
   bootstrapScriptContent: string | undefined,
 ): Promise<Response> {
   return await routeRSCServerRequest({
     // The incoming request.
     request,
     // How to fetch from the React Server.
-    fetchServer,
+    serverResponse,
     // Provide the React Server touchpoints.
     createFromReadableStream,
     // Render the router to HTML.

integration/helpers/rsc-parcel/src/server.tsx

@@ -63,10 +63,10 @@ app.get("/.well-known/appspecific/com.chrome.devtools.json", (_, res) => {
 
 // Hookup our application.
 app.use(
-  createRequestListener((request) =>
+  createRequestListener(async (request) =>
     prerender(
       request,
-      fetchServer,
+      await fetchServer(request),
       (assets as unknown as { bootstrapScript?: string }).bootstrapScript,
     ),
   ),

integration/helpers/rsc-vite/src/entry.rsc.tsx

@@ -37,5 +37,5 @@ export default async function handler(request: Request) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-imports
     typeof import("./entry.ssr")
   >("ssr", "index");
-  return ssr.default(request, fetchServer);
+  return ssr.default(request, await fetchServer(request));
 }

integration/helpers/rsc-vite/src/entry.ssr.tsx

@@ -8,13 +8,13 @@ import {
 
 export default async function handler(
   request: Request,
-  fetchServer: (request: Request) => Promise<Response>,
+  serverResponse: Response,
 ) {
   const bootstrapScriptContent =
     await import.meta.viteRsc.loadBootstrapScriptContent("index");
   return routeRSCServerRequest({
     request,
-    fetchServer,
+    serverResponse,
     createFromReadableStream,
     async renderHTML(getPayload) {
       const payload = getPayload();

packages/react-router-dev/config/default-rsc-entries/entry.rsc.tsx

@@ -37,7 +37,7 @@ export default async function handler(request: Request) {
   const ssr = await import.meta.viteRsc.loadModule<
     typeof import("./entry.ssr")
   >("ssr", "index");
-  return ssr.default(request, fetchServer);
+  return ssr.default(request, await fetchServer(request));
 }
 
 if (import.meta.hot) {

packages/react-router-dev/config/default-rsc-entries/entry.ssr.tsx

@@ -8,14 +8,14 @@ import {
 
 export default async function handler(
   request: Request,
-  fetchServer: (request: Request) => Promise<Response>,
+  serverResponse: Response,
 ) {
   const bootstrapScriptContent =
     await import.meta.viteRsc.loadBootstrapScriptContent("index");
 
   return routeRSCServerRequest({
     request,
-    fetchServer,
+    serverResponse,
     createFromReadableStream,
     async renderHTML(getPayload) {
       const payload = getPayload();