fix(ssr): hoist <link> from layout body into <head>

vivek7405 · vivek7405 · commit cfa4827e4a4c · 2026-05-04T11:51:18.000+05:30
Layouts emit &lt;link rel="icon"&gt;, &lt;link rel="stylesheet"&gt;, etc. in their
template body, but the SSR pipeline wraps that body in
&lt;div data-layout="..."&gt; before the existing hoister ran — so the
hoister (a) never saw &lt;link&gt;, and (b) couldn't reach past the wrapper
even for &lt;script&gt;/&lt;style&gt;. Result: favicon links sat inside &lt;body&gt;,
where browsers don't reliably honour them, and tab icons never
showed up on the website / docs / blog.

Extend hoistHeadTags to cover void &lt;link&gt; tags and to peek through a
leading &lt;div data-layout="..."&gt; wrapper, preserving the wrapper in
the body output. Stylesheets and theme bootstrap scripts now also
land in &lt;head&gt;, eliminating a small FOUC.
diff --git a/packages/server/src/ssr.js b/packages/server/src/ssr.js
@@ -231,26 +231,39 @@ async function collectMetadata(route, ctx, dev) {
 }
 
 /**
- * Extract leading `<script>` and `<style>` tags from the body HTML and
- * hoist them into `<head>`. Ensures blocking scripts (e.g. Tailwind
- * browser runtime, theme bootstrap) run before any body content renders.
+ * Extract leading `<script>`, `<style>`, and `<link>` tags from the body
+ * HTML and hoist them into `<head>`. Ensures blocking scripts (e.g.
+ * Tailwind runtime, theme bootstrap) run before any body content renders,
+ * and that `<link rel="icon">` / `<link rel="stylesheet">` land where
+ * browsers reliably honour them.
  *
  * @param {string} headHtml
  * @param {string} bodyHtml
  * @returns {{ head: string, body: string }}
  */
 function hoistHeadTags(headHtml, bodyHtml) {
   const hoisted = [];
-  const re = /^\s*(<(?:script|style)[\s>][\s\S]*?<\/(?:script|style)>)/i;
-  let remaining = bodyHtml;
+  // <script>…</script> and <style>…</style> are paired; <link …> is void.
+  const re = /^\s*(<script[\s>][\s\S]*?<\/script>|<style[\s>][\s\S]*?<\/style>|<link\b[^>]*>)/i;
+
+  // Step over an optional leading <div data-layout="…"> wrapper. The SSR
+  // pipeline wraps every layout's output in one of these so the client
+  // router can detect same-layout navigations; without this peek-through,
+  // any head-bound tag emitted at the top of a layout template would never
+  // be hoisted (it would always sit inside the wrapper).
+  const wrapRe = /^(\s*<div\s+data-layout="[^"]*">\s*)/;
+  const wm = wrapRe.exec(bodyHtml);
+  const prefix = wm ? wm[1] : '';
+  let remaining = wm ? bodyHtml.slice(wm[0].length) : bodyHtml;
+
   let m;
   while ((m = re.exec(remaining)) !== null) {
     hoisted.push(m[1]);
     remaining = remaining.slice(m[0].length);
   }
   if (!hoisted.length) return { head: headHtml, body: bodyHtml };
   const newHead = headHtml.replace('</head>', hoisted.join('\n') + '\n</head>');
-  return { head: newHead, body: remaining };
+  return { head: newHead, body: prefix + remaining };
 }
 
 // Internal helper re-exported for unit testing.
diff --git a/test/ssr.test.js b/test/ssr.test.js
@@ -92,6 +92,62 @@ test('hoistHeadTags: is case-insensitive for script/style tags', () => {
   assert.equal(body, '<main>ok</main>');
 });
 
+test('hoistHeadTags: lifts leading <link rel="icon"> to head', () => {
+  // Browsers only honour favicons declared in <head>; layouts that emit
+  // them in their template body must be hoisted, otherwise the tab icon
+  // never appears.
+  const bodyHtml =
+    '<link rel="icon" href="/public/favicon.svg" type="image/svg+xml">' +
+    '<link rel="apple-touch-icon" href="/public/favicon.png">' +
+    '<main>page</main>';
+  const { head, body } = _hoistHeadTags('<head></head>', bodyHtml);
+  assert.ok(head.includes('<link rel="icon" href="/public/favicon.svg" type="image/svg+xml">'));
+  assert.ok(head.includes('<link rel="apple-touch-icon" href="/public/favicon.png">'));
+  assert.equal(body, '<main>page</main>');
+});
+
+test('hoistHeadTags: lifts a mixed run of leading link/script/style', () => {
+  const bodyHtml =
+    '<link rel="icon" href="/f.svg">' +
+    '<script>var t = "dark";</script>' +
+    '<link rel="stylesheet" href="/x.css">' +
+    '<style>.a{}</style>' +
+    '<main>rest</main>';
+  const { head, body } = _hoistHeadTags('<head></head>', bodyHtml);
+  assert.ok(head.includes('<link rel="icon" href="/f.svg">'));
+  assert.ok(head.includes('<script>var t = "dark";</script>'));
+  assert.ok(head.includes('<link rel="stylesheet" href="/x.css">'));
+  assert.ok(head.includes('<style>.a{}</style>'));
+  assert.equal(body, '<main>rest</main>');
+});
+
+test('hoistHeadTags: does NOT lift <link> after normal content', () => {
+  const bodyHtml = '<main>page</main><link rel="icon" href="/late.svg">';
+  const { head, body } = _hoistHeadTags('<head></head>', bodyHtml);
+  assert.equal(head, '<head></head>');
+  assert.equal(body, bodyHtml);
+});
+
+test('hoistHeadTags: peeks through leading <div data-layout> wrapper', () => {
+  // The SSR pipeline wraps layout output in <div data-layout="…">; head
+  // tags emitted at the top of a layout template still need to land in
+  // <head>, with the wrapper preserved around the remaining body content.
+  const bodyHtml =
+    '<div data-layout="layout">' +
+    '<link rel="icon" href="/public/favicon.svg" type="image/svg+xml">' +
+    '<script>var t=1;</script>' +
+    '<main>page</main>' +
+    '</div>';
+  const { head, body } = _hoistHeadTags('<head></head>', bodyHtml);
+  assert.ok(head.includes('<link rel="icon" href="/public/favicon.svg" type="image/svg+xml">'));
+  assert.ok(head.includes('<script>var t=1;</script>'));
+  assert.ok(body.startsWith('<div data-layout="layout">'),
+    `wrapper preserved at start of body, got: ${body.slice(0, 80)}`);
+  assert.ok(body.includes('<main>page</main></div>'),
+    'body keeps page content + closing wrapper');
+  assert.ok(!body.includes('rel="icon"'), 'icon link removed from body');
+});
+
 /* ------------ ssrPage integration: cache-control + data-layout wrapping ------------ */
 
 async function makeRoute({ pageSrc, layoutSrc, metadata = null }) {
