feat: use Streaming SSR

Ponjimon · Apr 30, 2022 · a8d7f3f · a8d7f3f
1 parent 7eec4f1
commit a8d7f3f
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 12 deletions.
diff --git a/app/components/LazyLoaded.tsx b/app/components/LazyLoaded.tsx
@@ -0,0 +1,5 @@
+const LazyLoaded = () => (
+  <span>I have been lazily loaded using Streaming SSR!</span>
+);
+
+export default LazyLoaded;
diff --git a/app/components/README.md b/app/components/README.md
@@ -0,0 +1,3 @@
+## Components
+
+You can place your own components in this folder or just delete it. It only exists for demonstrating purposes only.
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,4 +1,4 @@
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import { RemixBrowser } from '@remix-run/react';
 
-hydrate(<RemixBrowser />, document);
+hydrateRoot(document, <RemixBrowser />);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,21 +1,42 @@
-import { renderToString } from 'react-dom/server';
+import { renderToReadableStream } from 'react-dom/server';
 import type { EntryContext } from '@remix-run/cloudflare';
 import { RemixServer } from '@remix-run/react';
+import isbot from 'isbot';
 
-export default function handleRequest(
+export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
+  const controller = new AbortController();
 
-  responseHeaders.set('Content-Type', 'text/html');
+  try {
+    const stream = await renderToReadableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        signal: controller.signal,
+        onError: error => {
+          responseStatusCode = 500;
+          console.error(error);
+        },
+      }
+    );
 
-  return new Response('<!DOCTYPE html>' + markup, {
-    status: responseStatusCode,
-    headers: responseHeaders,
-  });
+    if (isbot(request.headers.get('user-agent'))) {
+      await stream.allReady;
+    }
+
+    responseHeaders.set('Content-Type', 'text/html');
+
+    return new Response(stream, {
+      status: responseStatusCode,
+      headers: responseHeaders,
+    });
+  } catch (e) {
+    return new Response('<!doctype html><p>Loading...</p>', {
+      status: 500,
+      headers: { 'Content-Type': 'text/html' },
+    });
+  }
 }
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -1,4 +1,15 @@
+import { lazy, Suspense, useState } from 'react';
+
+const LazyLoaded = lazy(async () => {
+  // Artificial delay
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  return await import('../components/LazyLoaded');
+});
+
 export default function Index() {
+  const [showLazyLoaded, setShowLazyLoaded] = useState(false);
+
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
       <h1>Welcome to Remix</h1>
@@ -26,6 +37,17 @@ export default function Index() {
             Remix Docs
           </a>
         </li>
+        <li>
+          {showLazyLoaded ? (
+            <Suspense fallback="Loading...">
+              <LazyLoaded />
+            </Suspense>
+          ) : (
+            <button type="button" onClick={() => setShowLazyLoaded(true)}>
+              Click here to Lazy Load
+            </button>
+          )}
+        </li>
       </ul>
     </div>
   );

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@remix-run/cloudflare": "^1.4.3",
     "@remix-run/cloudflare-pages": "^1.4.3",
     "@remix-run/react": "^1.4.3",
+    "isbot": "^3.4.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
+    "module": "es2020",
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
     "esModuleInterop": true,

diff --git a/yarn.lock b/yarn.lock
@@ -4358,6 +4358,11 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isbot@^3.4.6:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/isbot/-/isbot-3.4.6.tgz#e3dd70034b6a6fad043753de71cd96929a678015"
+  integrity sha512-EEi3SVCPB4WHtMBaAYzYLgCP7yG9qixseYCf3IG0Yc+howLia+XFPLTT1437rzeViLeDInKOXOdFhs9Fa/xgWQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"