Another iteration

willianjusten · Dec 20, 2023 · 120edd0 · 120edd0
1 parent f94d600
commit 120edd0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 452 deletions.
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,31 +1,21 @@
-import { hydrate } from 'react-dom'
+import { StrictMode } from 'react'
+
+import { hydrateRoot } from 'react-dom/client'
 import { RemixBrowser } from 'remix'
 
-hydrate(<RemixBrowser />, document)
+const hydrate = () => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  )
+}
 
-if ('serviceWorker' in navigator) {
-  // Use the window load event to keep the page load performant
-  window.addEventListener('load', () => {
-    navigator.serviceWorker
-      .register('/entry.worker.js', { type: 'module' })
-      .then(() => navigator.serviceWorker.ready)
-      .then(() => {
-        if (navigator.serviceWorker.controller) {
-          navigator.serviceWorker.controller.postMessage({
-            type: 'SYNC_REMIX_MANIFEST',
-            manifest: window.__remixManifest,
-          })
-        } else {
-          navigator.serviceWorker.addEventListener('controllerchange', () => {
-            navigator.serviceWorker.controller?.postMessage({
-              type: 'SYNC_REMIX_MANIFEST',
-              manifest: window.__remixManifest,
-            })
-          })
-        }
-      })
-      .catch((error) => {
-        console.error('Service worker registration failed', error)
-      })
-  })
+if (typeof requestIdleCallback === 'function') {
+  requestIdleCallback(hydrate)
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1)
 }
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,21 +1,23 @@
+import { RemixServer } from '@remix-run/react'
 import { renderToString } from 'react-dom/server'
-import { RemixServer } from 'remix'
 import type { EntryContext } from 'remix'
 
-export default function handleRequest(
+export const handleRequest = (
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
-) {
+) => {
   const markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />,
   )
 
   responseHeaders.set('Content-Type', 'text/html')
 
   return new Response('<!DOCTYPE html>' + markup, {
-    status: responseStatusCode,
     headers: responseHeaders,
+    status: responseStatusCode,
   })
 }
+
+export default handleRequest