fix: fix FOUC

hi-ogawa · Nov 12, 2023 · 2d23d28 · 2d23d28
1 parent 8883f0e
commit 2d23d28
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -4,7 +4,7 @@ import { renderToString } from "react-dom/server";
 import { renderToDocument } from "./server/document";
 import { wrapTraceAsyncSimple } from "./utils/opentelemetry-utils";
 
-const handleDocumentRequest: HandleDocumentRequestFunction = (
+const handleDocumentRequest: HandleDocumentRequestFunction = async (
   request,
   responseStatusCode,
   responseHeaders,
@@ -14,7 +14,7 @@ const handleDocumentRequest: HandleDocumentRequestFunction = (
   const ssrHtml = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
-  const documentHtml = renderToDocument(ssrHtml);
+  const documentHtml = await renderToDocument(ssrHtml);
   responseHeaders.set("content-type", "text/html");
   return new Response(documentHtml, {
     status: responseStatusCode,

diff --git a/app/server/document.tsx b/app/server/document.tsx
@@ -1,10 +1,21 @@
 import { generateThemeScript } from "@hiogawa/theme-script";
+import { tinyassert } from "@hiogawa/utils";
+import { viteDevServer } from "@hiogawa/vite-import-dev-server/runtime";
 import { injectPublicConfigScript, publicConfig } from "../utils/config-public";
 
 // since we don't currently use remix's <Meta /> or <Links /> convention,
 // we can render static document html only on server, which is probably common ssr practice.
 
-export function renderToDocument(ssrHtml: string) {
+export async function renderToDocument(ssrHtml: string) {
+  // inject CSS to prevent FOUC during dev
+  // since vite/unocss will inject css on client via javascript
+  let style = "";
+  if (import.meta.env.DEV) {
+    tinyassert(viteDevServer);
+    const unocss = await viteDevServer.ssrLoadModule("virtual:uno.css");
+    style = `<style>${unocss["default"]}</style>`;
+  }
+
   // syntax highlight by https://github.com/mjbvz/vscode-comment-tagged-templates/
   return /* html */ `
 <!DOCTYPE html>
@@ -31,6 +42,7 @@ export function renderToDocument(ssrHtml: string) {
         height: 100%;
       }
     </style>
+    ${style}
     ${generateThemeScript({ storageKey: "ytsub:theme" })}
     ${injectPublicConfigScript()}
   </head>

diff --git a/package.json b/package.json
@@ -6,8 +6,6 @@
     "dev-coverage:remix": "c8 -o coverage/e2e-server -r text -r html --exclude build --exclude-after-remap node_modules/.bin/remix dev",
     "tsc": "tsc -b",
     "dev:tsc": "pnpm tsc --watch --preserveWatchOutput",
-    "build:css": "unocss 'app/**/*.tsx' --out-file ./build/css/index.css",
-    "dev:css": "pnpm build:css --watch",
     "lint": "run-s lint:*",
     "lint-check": "run-s lint-check:*",
     "lint:isort": "pnpm lint-check:isort --fix",