🔥 enable streaming @edge

Girish21 · Dec 10, 2022 · c30711a · c30711a
1 parent 9d882b3
commit c30711a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/packages/remix-app/app/entry.client.tsx b/packages/remix-app/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 (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate)
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1)
+}
diff --git a/packages/remix-app/app/entry.server.tsx b/packages/remix-app/app/entry.server.tsx
@@ -1,21 +1,34 @@
-import type { EntryContext } from '@remix-run/cloudflare'
+import { renderToReadableStream } from 'react-dom/server'
 import { RemixServer } from '@remix-run/react'
-import { renderToString } from 'react-dom/server'
+import isbot from 'isbot'
+import type { EntryContext } from '@remix-run/cloudflare'
 
-export default function handleRequest(
+export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  let markup = renderToString(
+  const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
+    {
+      onError: error => {
+        responseStatusCode = 500
+        console.error(error)
+      },
+      signal: request.signal,
+    },
   )
 
-  responseHeaders.set('Content-Type', 'text/html')
+  if (isbot(request.headers.get('User-Agent'))) {
+    await body.allReady
+  }
+
+  const headers = new Headers(responseHeaders)
+  headers.set('Content-Type', 'text/html')
 
-  return new Response('<!DOCTYPE html>' + markup, {
+  return new Response(body, {
     status: responseStatusCode,
-    headers: responseHeaders,
+    headers,
   })
 }
diff --git a/packages/worker/wrangler.example.toml b/packages/worker/wrangler.example.toml
@@ -1,5 +1,6 @@
-compatibility_date = "2022-05-22"
 main = "src/index.ts"
+compatibility_date = "2022-11-17"
+compatibility_flags = ["streams_enable_constructors"]
 
 workers_dev = true
 

diff --git a/packages/worker/wrangler.toml b/packages/worker/wrangler.toml
@@ -1,6 +1,7 @@
-compatibility_date = "2022-05-22"
-main = "src/index.ts"
 name = "remix-cloudflare-template"
+main = "src/index.ts"
+compatibility_date = "2022-11-17"
+compatibility_flags = ["streams_enable_constructors"]
 
 [site]
 bucket = "../remix-app/public"