Use HydrateFallback with a modified entry.server.tsx

BlossomLabs · Nov 6, 2024 · c03299e · c03299e
1 parent 8b4b3f8
commit c03299e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 24 deletions.
diff --git a/apps/web/src/app/entry.client.tsx b/apps/web/src/app/entry.client.tsx
@@ -1,16 +1,10 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
 import { RemixBrowser } from "@remix-run/react";
 import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
   hydrateRoot(
-    document,
+    document.querySelector("#app") as Element,
     <StrictMode>
       <RemixBrowser />
     </StrictMode>,

diff --git a/apps/web/src/app/entry.server.tsx b/apps/web/src/app/entry.server.tsx
@@ -0,0 +1,34 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+import { MetaTags } from "./root";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const shellHtml = fs
+    .readFileSync(path.join(process.cwd(), "src/app/index.html"))
+    .toString();
+
+  const appHtml = renderToString(
+    <RemixServer context={remixContext} url={request.url} />,
+  );
+
+  const metaHtml = renderToString(<MetaTags />);
+
+  const html = shellHtml
+    .replace("<!-- Meta -->", metaHtml)
+    .replace("<!-- Remix SPA -->", appHtml);
+
+  return new Response(html, {
+    headers: { "Content-Type": "text/html" },
+    status: responseStatusCode,
+  });
+}
diff --git a/apps/web/src/app/index.html b/apps/web/src/app/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head><!-- Meta --></head>
+  <body>
+    <div id="app"><!-- Remix SPA --></div>
+  </body>
+</html>
diff --git a/apps/web/src/app/root.tsx b/apps/web/src/app/root.tsx
@@ -42,28 +42,42 @@ export function links() {
   ];
 }
 
-export const meta: MetaFunction = () => [
-  { title: SITE_NAME },
-  { name: "title", content: SITE_NAME },
-  { name: "description", content: SITE_DESCRIPTION },
-  { name: "theme-color", content: "#111827" },
-  { name: "image", content: `${SITE_URL}/logo-bg.svg` },
-  { property: "og:type", content: "website" },
-  { property: "og:title", content: SITE_NAME },
-  { property: "og:description", content: SITE_DESCRIPTION },
-  { property: "og:url", content: SITE_URL },
-  { property: "og:image", content: `${SITE_URL}/opengraph-image.webp` },
-  { name: "twitter:card", content: "summary" },
-  { name: "twitter:image", content: `${SITE_URL}/opengraph-image.webp` },
-  { name: "twitter:site", content: SOCIAL_TWITTER },
-];
+export function MetaTags() {
+  return (
+    <>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <title>{SITE_NAME}</title>
+      <meta name="title" content={SITE_NAME} />
+      <meta name="description" content={SITE_DESCRIPTION} />
+      <meta name="theme-color" content="#111827" />
+      <meta name="image" content={`${SITE_URL}/logo-bg.svg`} />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={SITE_NAME} />
+      <meta property="og:description" content={SITE_DESCRIPTION} />
+      <meta property="og:url" content={SITE_URL} />
+      <meta property="og:image" content={`${SITE_URL}/opengraph-image.webp`} />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:image" content={`${SITE_URL}/opengraph-image.webp`} />
+      <meta name="twitter:site" content={SOCIAL_TWITTER} />
+    </>
+  );
+}
+
+export function HydrateFallback() {
+  return (
+    <>
+      <p>Loading...</p>
+      <Scripts />
+    </>
+  );
+}
 
 export default function App() {
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <MetaTags />
         <Meta />
         <Links />
       </head>