diff --git a/packages/remix-app/app/entry.client.tsx b/packages/remix-app/app/entry.client.tsx
index 59791cc..2be9125 100644
--- 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, )
+function hydrate() {
+ startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ ,
+ )
+ })
+}
+
+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
index f5eddfa..6b358c2 100644
--- 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(
,
+ {
+ 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('' + markup, {
+ return new Response(body, {
status: responseStatusCode,
- headers: responseHeaders,
+ headers,
})
}
diff --git a/packages/worker/wrangler.example.toml b/packages/worker/wrangler.example.toml
index 6075541..b8aedd0 100644
--- 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
index 8e4ad57..305209e 100644
--- 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"