Adopt latest entry.(client|server).tsx examples

• update entry.server.tsx based on: https://github.com/remix-run/react-router-templates/blob/main/cloudflare/app/entry.server.tsx • remove entry.client.tsx files (they aren’t in the template examples any more)
jplhomer · Feb 7, 2025 · 01f7b77 · 01f7b77
1 parent 1314eda
commit 01f7b77
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 76 deletions.
diff --git a/apps/site/app/entry.client.tsx b/apps/site/app/entry.client.tsx
diff --git a/apps/site/app/entry.server.tsx b/apps/site/app/entry.server.tsx
@@ -16,22 +16,30 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  reactRouterContext: EntryContext,
-  _loadContext: AppLoadContext
+  routerContext: EntryContext
 ) {
+  let shellRendered = false;
+  const userAgent = request.headers.get("user-agent");
+
   const body = await renderToReadableStream(
-    <ServerRouter context={reactRouterContext} url={request.url} />,
+    <ServerRouter context={routerContext} url={request.url} />,
     {
       onError(error: unknown) {
-        // Log streaming rendering errors from inside the shell
-        console.error(error);
         responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
       },
-      signal: request.signal,
     }
   );
+  shellRendered = true;
 
-  if (isbot(request.headers.get("user-agent") || "")) {
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
     await body.allReady;
   }
 

diff --git a/examples/remix-cms/app/entry.client.tsx b/examples/remix-cms/app/entry.client.tsx
diff --git a/examples/remix-cms/app/entry.server.tsx b/examples/remix-cms/app/entry.server.tsx
@@ -6,28 +6,36 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  reactRouterContext: EntryContext
+  routerContext: EntryContext
 ) {
+  let shellRendered = false;
+  const userAgent = request.headers.get("user-agent");
+
   const body = await renderToReadableStream(
-    <ServerRouter context={reactRouterContext} url={request.url} />,
+    <ServerRouter context={routerContext} url={request.url} />,
     {
       onError(error: unknown) {
         responseStatusCode = 500;
-        // Log streaming rendering errors from inside the shell
-        console.error(error);
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
       },
-      signal: request.signal,
     }
   );
+  shellRendered = true;
 
-  if (isbot(request.headers.get("user-agent") || "")) {
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
     await body.allReady;
   }
 
   responseHeaders.set("Content-Type", "text/html");
-
   return new Response(body, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }
diff --git a/templates/remix/app/entry.client.tsx b/templates/remix/app/entry.client.tsx
diff --git a/templates/remix/app/entry.server.tsx b/templates/remix/app/entry.server.tsx
@@ -11,28 +11,36 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  reactRouterContext: EntryContext
+  routerContext: EntryContext
 ) {
+  let shellRendered = false;
+  const userAgent = request.headers.get("user-agent");
+
   const body = await renderToReadableStream(
-    <ServerRouter context={reactRouterContext} url={request.url} />,
+    <ServerRouter context={routerContext} url={request.url} />,
     {
       onError(error: unknown) {
         responseStatusCode = 500;
-        // Log streaming rendering errors from inside the shell
-        console.error(error);
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
       },
-      signal: request.signal,
     }
   );
+  shellRendered = true;
 
-  if (isbot(request.headers.get("user-agent") || "")) {
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
     await body.allReady;
   }
 
   responseHeaders.set("Content-Type", "text/html");
-
   return new Response(body, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }