update template client entry to match remix (#604)

* update template client entry to match remix * update entry.server.tsx based on new remix template
Shopify · Mar 3, 2023 · 4514286 · 4514286
1 parent 4443a2b
commit 4514286
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 15 deletions.
diff --git a/templates/demo-store/app/entry.client.tsx b/templates/demo-store/app/entry.client.tsx
@@ -1,4 +1,22 @@
 import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
+
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/templates/demo-store/app/entry.server.tsx b/templates/demo-store/app/entry.server.tsx
@@ -1,7 +1,7 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
-import {renderToReadableStream} from 'react-dom/server';
 import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
 
 export default async function handleRequest(
   request: Request,
@@ -11,16 +11,23 @@ export default async function handleRequest(
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  if (isbot(request.headers.get('User-Agent'))) {
+  if (isbot(request.headers.get('user-agent'))) {
     await body.allReady;
   }
 
   responseHeaders.set('Content-Type', 'text/html');
-
   return new Response(body, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }
diff --git a/templates/hello-world/app/entry.client.tsx b/templates/hello-world/app/entry.client.tsx
@@ -1,4 +1,22 @@
 import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
+
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/templates/hello-world/app/entry.server.tsx b/templates/hello-world/app/entry.server.tsx
@@ -1,5 +1,6 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 
 export default async function handleRequest(
@@ -10,12 +11,23 @@ export default async function handleRequest(
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  responseHeaders.set('Content-Type', 'text/html');
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
 
+  responseHeaders.set('Content-Type', 'text/html');
   return new Response(body, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }
diff --git a/templates/skeleton/app/entry.client.tsx b/templates/skeleton/app/entry.client.tsx
@@ -1,4 +1,22 @@
 import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-hydrateRoot(document, <RemixBrowser />);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
+
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
diff --git a/templates/skeleton/app/entry.server.tsx b/templates/skeleton/app/entry.server.tsx
@@ -1,21 +1,33 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
-import {renderToString} from 'react-dom/server';
+import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
 
-export default function handleRequest(
+export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const markup = renderToString(
+  const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
   );
 
-  responseHeaders.set('Content-Type', 'text/html');
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
 
-  return new Response('<!DOCTYPE html>' + markup, {
-    status: responseStatusCode,
+  responseHeaders.set('Content-Type', 'text/html');
+  return new Response(body, {
     headers: responseHeaders,
+    status: responseStatusCode,
   });
 }