feat: inject CSS and JS assets into SSR HTML head

rsbh · claude · rsbh · commit 041ce2156da8 · 2026-03-23T13:11:11.000+05:30
Use Nitro ?assets=client/ssr virtual imports to collect CSS/JS
assets and inject as &lt;link&gt; tags in HTML &lt;head&gt;.
Fixes unstyled flash on initial page load.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/chronicle/src/server/routes/[...].ts b/packages/chronicle/src/server/routes/[...].ts
@@ -6,6 +6,10 @@ import { loadConfig } from '@/lib/config';
 import { loadApiSpecs } from '@/lib/openapi';
 import { buildPageTree, getPage, loadPageComponent } from '@/lib/source';
 import { render } from '../entry-server';
+// @ts-expect-error virtual import from Nitro
+import clientAssets from '../entry-client?assets=client';
+// @ts-expect-error virtual import from Nitro
+import serverAssets from '../entry-server?assets=ssr';
 
 export default defineHandler(async event => {
   const pathname = event.url.pathname;
@@ -46,6 +50,14 @@ export default defineHandler(async event => {
 
   const appHtml = await render(event.url.href, { config, tree, page: pageData, apiSpecs });
 
+  const assets = clientAssets.merge(serverAssets);
+  const cssLinks = assets.css.map((attr: { href: string }) =>
+    `<link rel="stylesheet" href="${attr.href}" />`
+  ).join('\n    ');
+  const jsPreloads = assets.js.map((attr: { href: string }) =>
+    `<link rel="modulepreload" href="${attr.href}" />`
+  ).join('\n    ');
+
   const safeJson = JSON.stringify(embeddedData).replace(/</g, '\\u003c');
   const dataScript = `<script>window.__PAGE_DATA__ = ${safeJson}</script>`;
 
@@ -54,11 +66,13 @@ export default defineHandler(async event => {
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    ${cssLinks}
+    ${jsPreloads}
     ${dataScript}
   </head>
   <body>
     <div id="root">${appHtml}</div>
-    <script type="module" src="/src/server/entry-client.tsx"></script>
+    <script type="module" src="${assets.entry}"></script>
   </body>
 </html>`;
 
