bosia 1.1.3 → 1.1.5

package/src/core/html.ts

@@ -62,18 +62,84 @@ export function baseScript(nonce?: string): string {
  *  no buster (same reason as ENTRY). Unknown pattern or an older dist/ without
  *  the `preload` field → nothing, and the page loads as it did before. */
 export function routePreloadLinks(pattern?: string): string {
-	if (!pattern) return "";
-	return (distManifest.preload?.[pattern] ?? [])
-		.map((f) => `\n  <link rel="modulepreload" href="${DIST}/${f}">`)
-		.join("");
+	const preload = distManifest.preload;
+	if (!pattern || !preload) return "";
+	let byPattern = preloadLinks.get(preload);
+	if (!byPattern) preloadLinks.set(preload, (byPattern = new Map()));
+	let links = byPattern.get(pattern);
+	if (links === undefined) {
+		links = (preload[pattern] ?? [])
+			.map((f) => `\n  <link rel="modulepreload" href="${DIST}/${f}">`)
+			.join("");
+		byPattern.set(pattern, links);
+	}
+	return links;
 }
 
+// One header value per route pattern (plus "" for no pattern), built on first
+// use. Bounded by the number of routes.
+const linkHeaders = new Map<string, string>();
+
+/**
+ * `Link` response header naming the stylesheets and, when the page hydrates,
+ * the client entry and the route's chunks. The document lists the same files,
+ * but a CDN that sends 103 Early Hints (Cloudflare) reads them off this header
+ * and lets the browser start downloading while the loaders still run.
+ * Prod only — dev URLs carry a cache buster and nothing sits in front.
+ */
+export function preloadLinkHeader(pattern: string | undefined, csr: boolean): string | null {
+	if (isDev) return null;
+	const key = `${csr ? "1" : "0"}${pattern ?? ""}`;
+	let value = linkHeaders.get(key);
+	if (value === undefined) {
+		const tw = distManifest.tw ? `${DIST}/${distManifest.tw}` : TW_CSS;
+		const parts = [tw, ...(distManifest.css ?? []).map((f) => `${DIST}/${f}`)].map(
+			(href) => `<${href}>; rel=preload; as=style`,
+		);
+		if (csr) {
+			const scripts = [
+				ENTRY,
+				...(distManifest.preload?.[pattern ?? ""] ?? []).map((f) => `${DIST}/${f}`),
+			];
+			for (const href of scripts) parts.push(`<${href}>; rel=modulepreload`);
+		}
+		value = parts.join(", ");
+		linkHeaders.set(key, value);
+	}
+	return value;
+}
+
+/** `extra` with the preload `Link` header added — after any `link` a loader set. */
+export function withPreloadLink(
+	extra: Record<string, string> | undefined,
+	pattern: string | undefined,
+	csr: boolean,
+): Record<string, string> | undefined {
+	const link = preloadLinkHeader(pattern, csr);
+	if (!link) return extra;
+	const own = extra?.["link"];
+	return { ...extra, link: own ? `${own}, ${link}` : link };
+}
+
+// The head fragments below are the same on every request, so each is built
+// once and reused for as long as the manifest field it reads stays the same
+// object (tests swap them out).
+const preloadLinks = new WeakMap<object, Map<string, string>>();
+
 /** Tailwind stylesheet link. Content-hashed name needs no cache buster — the
  *  hash IS the buster. Fallback keeps older dist/ artifacts (no `tw` field) styled. */
+let twLink: { tw: string | undefined; html: string } | null = null;
 function twCssLink(): string {
-	return distManifest.tw
-		? `<link rel="stylesheet" href="${DIST}/${distManifest.tw}">`
-		: `<link rel="stylesheet" href="${TW_CSS}${cacheBust}">`;
+	const tw = distManifest.tw;
+	if (!twLink || twLink.tw !== tw) {
+		twLink = {
+			tw,
+			html: tw
+				? `<link rel="stylesheet" href="${DIST}/${tw}">`
+				: `<link rel="stylesheet" href="${TW_CSS}${cacheBust}">`,
+		};
+	}
+	return twLink.html;
 }
 
 /** The build-time component stylesheet (scoped `<style>` blocks, concatenated).
@@ -83,10 +149,18 @@ function twCssLink(): string {
  *  is settled on source order. Linking before Tailwind would silently flip
  *  which one wins. Each entry carries its own indent and newline, so an app with
  *  no scoped styles at all contributes nothing rather than a blank line. */
+let cssLinks: { css: string[] | undefined; html: string } | null = null;
 function componentCssLinks(): string {
-	return (distManifest.css ?? [])
-		.map((f: string) => `  <link rel="stylesheet" href="${DIST}/${f}">\n`)
-		.join("");
+	const css = distManifest.css;
+	if (!cssLinks || cssLinks.css !== css) {
+		cssLinks = {
+			css,
+			html: (css ?? [])
+				.map((f: string) => `  <link rel="stylesheet" href="${DIST}/${f}">\n`)
+				.join(""),
+		};
+	}
+	return cssLinks.html;
 }
 
 /** Inline theme bootstrap — runs before paint to avoid FOUC. theme ∈ light|dark|system (missing = system). */
@@ -464,27 +538,74 @@ export function disableCompression(): void {
 // Shared, stateless — one instance instead of a fresh allocation per response.
 const textEncoder = new TextEncoder();
 
-export type Encoding = "br" | "gzip";
+/** Encodings stored ahead of time — cache entries and build-time static files. */
+export type StoredEncoding = "br" | "gzip";
+export type Encoding = StoredEncoding | "zstd";
 
-/** Best encoding the client accepts — brotli over gzip, null for identity.
+/** Best stored encoding the client accepts — brotli over gzip, null for identity.
  *  A substring check, not q-value parsing: no browser sends `br;q=0`. */
-export function pickEncoding(accept: string | null): Encoding | null {
+export function pickEncoding(accept: string | null): StoredEncoding | null {
 	if (!accept) return null;
 	if (accept.includes("br")) return "br";
 	if (accept.includes("gzip")) return "gzip";
 	return null;
 }
 
-// Quality 5: close to gzip's speed with a better ratio — runs per request.
-const BROTLI_RUNTIME = { params: { [zlibConstants.BROTLI_PARAM_QUALITY]: 5 } };
+/** Best encoding for a body compressed on the spot. zstd comes first: at
+ *  level 3 it matches brotli q3's size on an HTML page in about half the CPU
+ *  (55µs vs 95µs for 7KB). Current Chrome and Firefox send it; everyone else
+ *  falls back to `pickEncoding`. */
+export function pickRequestEncoding(accept: string | null): Encoding | null {
+	if (accept?.includes("zstd")) return "zstd";
+	return pickEncoding(accept);
+}
 
-/** Compress bytes on the request path. The one place runtime quality is set —
- *  cache.ts builds its stored variants through here too. */
-export function encodeBytes(bytes: Uint8Array, enc: Encoding): Uint8Array<ArrayBuffer> {
-	const out = enc === "br" ? brotliCompressSync(bytes, BROTLI_RUNTIME) : gzipSync(bytes);
+// Per-request brotli runs once per response, so it favors speed: q3 is ~2x
+// faster than q5 for ~5–25% bigger output. Cached variants are built once and
+// served many times, so they take q5. 11 (the default) would block the event
+// loop ~17ms per 500KB.
+export type Quality = "request" | "cache";
+const BROTLI = {
+	request: { params: { [zlibConstants.BROTLI_PARAM_QUALITY]: 3 } },
+	cache: { params: { [zlibConstants.BROTLI_PARAM_QUALITY]: 5 } },
+};
+
+// Bun's native gzip is ~40% faster than node:zlib's at the same level and
+// size. Workers has no `Bun`, but never compresses (see compressionOn).
+const hasBun = typeof Bun !== "undefined";
+
+/** The one place runtime compression quality is set — cache.ts builds its
+ *  stored variants through here too. gzip keeps zlib's default level. */
+export function encodeBytes(
+	bytes: Uint8Array,
+	enc: Encoding,
+	quality: Quality = "request",
+): Uint8Array<ArrayBuffer> {
+	if (enc === "zstd") return Bun.zstdCompressSync(bytes, { level: 3 }) as Uint8Array<ArrayBuffer>;
+	if (enc === "gzip" && hasBun)
+		return Bun.gzipSync(bytes as Uint8Array<ArrayBuffer>) as Uint8Array<ArrayBuffer>;
+	const out = enc === "br" ? brotliCompressSync(bytes, BROTLI[quality]) : gzipSync(bytes);
 	return new Uint8Array(out) as Uint8Array<ArrayBuffer>;
 }
 
+export type Encoded = { enc: Encoding; encoded: Uint8Array<ArrayBuffer> };
+
+/** The body this client gets, or null when it goes out uncompressed. */
+export function encodeForRequest(
+	bytes: Uint8Array<ArrayBuffer>,
+	req: Request,
+	quality: Quality = "request",
+): Encoded | null {
+	const accept = req.headers.get("accept-encoding");
+	// A cache-quality body is also stored in the cache entry, which only keeps
+	// brotli and gzip copies — so it never picks zstd.
+	const enc = quality === "cache" ? pickEncoding(accept) : pickRequestEncoding(accept);
+	// Skip compression in dev — the dev proxy's fetch() auto-decompresses gzip
+	// responses but keeps the Content-Encoding header, causing ERR_CONTENT_DECODING_FAILED.
+	if (!compressionOn || isDev || !enc || bytes.length <= GZIP_MIN_BYTES) return null;
+	return { enc, encoded: encodeBytes(bytes, enc, quality) };
+}
+
 export function compress(
 	body: string,
 	contentType: string,
@@ -495,12 +616,15 @@ export function compress(
 	return compressBytes(textEncoder.encode(body), contentType, req, status, extraHeaders);
 }
 
+/** `encoded`: the result of `encodeForRequest` when the caller already has it
+ *  (a cache write reuses the same bytes); omitted, it is built here. */
 export function compressBytes(
 	bytes: Uint8Array<ArrayBuffer>,
 	contentType: string,
 	req: Request,
 	status = 200,
 	extraHeaders?: Record<string, string>,
+	encoded: Encoded | null = encodeForRequest(bytes, req),
 ): Response {
 	// Base keys lowercased so lowercased extraHeaders (e.g. loader setHeaders)
 	// override them instead of getting comma-joined by Headers.
@@ -509,14 +633,11 @@ export function compressBytes(
 		vary: "Accept-Encoding",
 		...extraHeaders,
 	};
-	const enc = pickEncoding(req.headers.get("accept-encoding"));
-	// Skip compression in dev — the dev proxy's fetch() auto-decompresses gzip
-	// responses but keeps the Content-Encoding header, causing ERR_CONTENT_DECODING_FAILED.
-	if (compressionOn && !isDev && enc && bytes.length > GZIP_MIN_BYTES) {
-		return new Response(encodeBytes(bytes, enc), {
+	if (encoded) {
+		return new Response(encoded.encoded, {
 			...PRECOMPRESSED,
 			status,
-			headers: { ...headers, "content-encoding": enc },
+			headers: { ...headers, "content-encoding": encoded.enc },
 		});
 	}
 	return new Response(bytes, { status, headers });

package/src/core/plugins/inspector/bun-plugin.ts

@@ -2,7 +2,7 @@ import { parse, compile } from "svelte/compiler";
 import MagicString from "magic-string";
 import { relative } from "node:path";
 import type { BunPlugin } from "bun";
-import { svelteMapCache } from "../../svelteCompiler.ts";
+import { cachedCompile, svelteMapCache } from "../../svelteCompiler.ts";
 import { lineColFromOffset } from "../../sourceLoc.ts";
 import { toPosix } from "../../paths.ts";
 import { collectComponentCss } from "../../componentCss.ts";
@@ -133,21 +133,35 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 				const rel = toPosix(relative(cwd, args.path));
 				const transformed = injectLocs(source, rel);
 
-				const result = compile(transformed, {
-					filename: args.path,
-					generate,
-					dev,
-					hmr: dev,
-					// Mirror the prod compiler (svelteCompiler.ts): external on both
-					// targets, with the client's rules harvested into one stylesheet
-					// that the head links. This plugin registers ahead of the main
-					// compiler and its onLoad wins in dev, so letting the two drift
-					// here is how dev and prod stop agreeing about first paint.
-					css: "external",
-					preserveWhitespace: dev,
-					preserveComments: dev,
-					cssHash: ({ css }) => `svelte-${fnv(css)}`,
-				});
+				// Reused across `bosia dev` rebuilds when nothing it depends on changed
+				// (see cachedCompile in svelteCompiler.ts).
+				const { value: result } = await cachedCompile(
+					["inspector", args.path, generate, dev, transformed],
+					() => {
+						const out = compile(transformed, {
+							filename: args.path,
+							generate,
+							dev,
+							hmr: dev,
+							// Mirror the prod compiler (svelteCompiler.ts): external on both
+							// targets, with the client's rules harvested into one stylesheet
+							// that the head links. This plugin registers ahead of the main
+							// compiler and its onLoad wins in dev, so letting the two drift
+							// here is how dev and prod stop agreeing about first paint.
+							css: "external",
+							preserveWhitespace: dev,
+							preserveComments: dev,
+							cssHash: ({ css }) => `svelte-${fnv(css)}`,
+						});
+						return {
+							js: {
+								code: out.js.code,
+								map: typeof out.js.map === "string" ? JSON.parse(out.js.map) : out.js.map,
+							},
+							css: out.css ? { code: out.css.code } : null,
+						};
+					},
+				);
 
 				// Store Svelte's compile-step map. Bun's bundler doesn't chain
 				// onLoad sourcemaps, so the final bundle map resolves stack frames
@@ -164,8 +178,7 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 				// line numbers differ. The resolver translates browser-side stack
 				// frames (delivered via SSE), which run client code.
 				if (dev && generate === "client" && result.js.map) {
-					const m = typeof result.js.map === "string" ? JSON.parse(result.js.map) : result.js.map;
-					svelteMapCache.set(args.path, m);
+					svelteMapCache.set(args.path, result.js.map);
 				}
 
 				// Client only — see the same guard in svelteCompiler.ts.

package/src/core/renderer.ts

@@ -15,7 +15,6 @@ import {
 	coalesceMiss,
 	collectTags,
 	computeCacheKey,
-	concatChunks,
 	deferCacheWrite,
 	serveCached,
 } from "./cache.ts";
@@ -33,7 +32,10 @@ import {
 	buildHtmlTail,
 	compress,
 	compressBytes,
+	encodeForRequest,
 	isDev,
+	withPreloadLink,
+	type Encoded,
 } from "./html.ts";
 import type { Metadata } from "./hooks.ts";
 import { loadPlugins } from "./config.ts";
@@ -356,20 +358,17 @@ function makeDepends(deps: LoaderDeps): (...keys: string[]) => void {
 // Runs layout + page server loaders for a given URL.
 // Used by both SSR and the /__bosia/data JSON endpoint.
 //
-// `mask` controls selective re-runs from the client data endpoint:
-//   - undefined → run everything (SSR, first nav)
-//   - layouts[i] === true → run that layout; false → skip, emit null
-//   - page === true → run page; false → skip, emit null
-// When skipped, the parent() chain still receives the *combined parent
-// data* contributed by previously-cached layers. The client already holds
-// each skipped layer's data in its loader cache and forwards it as
-// `parentSnapshots` (depth → data) in the request body, so downstream
-// loaders that DO re-run see real parent() data, not `{}`. The response
-// slot stays `null` (client renders that layer from its cache).
+// `mask` controls which layers' data the client data endpoint sends back:
+//   - undefined → send everything (SSR, first nav)
+//   - layouts[i] === false → the layout still RUNS, but its slot is emitted as
+//     null (the client renders that layer from its loader cache)
+//   - page === false → page loader is skipped, emit null
 //
-// Trust boundary: parentSnapshots are a client-supplied perf hint, never
-// authoritative. Anything authz-related must read `event.locals` (populated
-// in hooks.server.ts), never `parent()`.
+// Layout loaders are never skipped on the server. They are where apps gate a
+// route group (`if (!locals.user) throw redirect(...)`), and the mask comes from
+// the client — honouring it would let any caller switch a guard off with
+// `?_invalidated=…`. Their output also feeds `parent()` for the loaders below,
+// so it has to be the server's own, never data the client sends.
 
 export type LoaderMask = {
 	page: boolean;
@@ -381,10 +380,9 @@ export async function loadRouteData(
 	locals: Record<string, any>,
 	req: Request,
 	cookies: Cookies,
-	metadataData: Record<string, any> | null = null,
+	metadataData: Record<string, any> | null | Promise<Record<string, any> | null> = null,
 	match?: RouteMatch<(typeof serverRoutes)[number]> | null,
 	mask?: LoaderMask,
-	parentSnapshots?: Record<number, Record<string, any>>,
 ) {
 	match ??= findMatch(serverRoutes, url.pathname);
 	if (!match) return null;
@@ -402,18 +400,9 @@ export async function loadRouteData(
 
 	// Run layout server loaders root → leaf, each gets parent() data
 	for (const ls of route.layoutServers) {
-		const skip = mask && mask.layouts[ls.depth] === false;
+		// Runs regardless of the mask — see the trust note above loadRouteData.
+		const omit = mask && mask.layouts[ls.depth] === false;
 		try {
-			if (skip) {
-				layoutData[ls.depth] = null;
-				layoutDeps[ls.depth] = null;
-				// Skipped layers contribute their client-cached data (forwarded as
-				// parentSnapshots) to the parent chain, so downstream loaders that DO
-				// re-run see real parent() data. Falls back to {} when no snapshot was
-				// sent. Perf hint only — never authoritative for authz (use locals).
-				parentData = { ...parentData, ...(parentSnapshots?.[ls.depth] ?? {}) };
-				continue;
-			}
 			const mod = await ls.loader();
 			if (typeof mod.load === "function" && !warmingUp) {
 				// Snapshot per layer so loaders cannot mutate the shared accumulator,
@@ -425,6 +414,7 @@ export async function loadRouteData(
 					(await withTimeout(
 						mod.load({
 							params: trackedParams(params, deps),
+							route: { id: route.id },
 							url: trackedUrl(url, deps),
 							locals,
 							cookies: trackedCookies(cookies, deps),
@@ -438,12 +428,12 @@ export async function loadRouteData(
 						LOAD_TIMEOUT,
 						`layout load (depth=${ls.depth}, ${url.pathname})`,
 					)) ?? {};
-				layoutData[ls.depth] = result;
-				layoutDeps[ls.depth] = deps;
+				layoutData[ls.depth] = omit ? null : result;
+				layoutDeps[ls.depth] = omit ? null : deps;
 				parentData = { ...parentData, ...result };
 			} else {
-				layoutData[ls.depth] = {};
-				layoutDeps[ls.depth] = emptyDeps();
+				layoutData[ls.depth] = omit ? null : {};
+				layoutDeps[ls.depth] = omit ? null : emptyDeps();
 			}
 		} catch (err) {
 			if (isRedirect(err)) throw err;
@@ -492,12 +482,13 @@ export async function loadRouteData(
 					(await withTimeout(
 						mod.load({
 							params: trackedParams(params, deps),
+							route: { id: route.id },
 							url: trackedUrl(url, deps),
 							locals,
 							cookies: trackedCookies(cookies, deps),
 							parent,
 							fetch: trackedFetch(fetch, origin, deps),
-							metadata: metadataData,
+							metadata: await metadataData,
 							depends: makeDepends(deps),
 							platform: getPlatform(),
 							setHeaders,
@@ -562,7 +553,15 @@ export async function loadMetadata(
 			const fetch = makeFetch(req, url);
 			return (
 				(await withTimeout(
-					mod.metadata({ params, url, locals, cookies, fetch, platform: getPlatform() }),
+					mod.metadata({
+						params,
+						route: { id: route.id },
+						url,
+						locals,
+						cookies,
+						fetch,
+						platform: getPlatform(),
+					}),
 					METADATA_TIMEOUT,
 					`metadata (${url.pathname})`,
 				)) ?? null
@@ -644,12 +643,53 @@ export async function renderSSRStream(
 	// below must stay inside this try; the cache-write path hands the release
 	// off to its deferred cacheSet by nulling releaseMiss first.
 	try {
-		// ── Pre-stream phase: resolve metadata before committing to a 200 ──
-		// Errors here return a proper error response with correct status code.
+		// ── Pre-stream phase: metadata(), loaders, module imports and plugin
+		// fragments all start together, and all settle before committing to a 200,
+		// so a Redirect/HttpError from any of them still gets a proper response.
+		// Layout loaders still run in order before the page load(), which also
+		// waits for metadata.data (see loadRouteData).
+		const metadataP = loadMetadata(route, params, url, locals, cookies, req).then(
+			(value) => ({ ok: true as const, value }),
+			(err: unknown) => ({ ok: false as const, err }),
+		);
+		const dataP = Promise.all([
+			loadRouteData(
+				url,
+				locals,
+				req,
+				cookies,
+				// A failed metadata() hands load() null, as before — and when the
+				// failure ends the request, the result below is never read.
+				metadataP.then((m) => (m.ok ? (m.value?.data ?? null) : null)),
+				match,
+			),
+			Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
+			// pageMod is already loaded when the cache flag was unknown.
+			pageMod ?? route.pageModule(),
+		]);
+		// Settled by the early returns below without being read.
+		dataP.catch(() => {});
+		const fragmentsP = metadataP.then((m) => {
+			const renderCtx: RenderContext = {
+				request: req,
+				url,
+				route: { pattern: route.pattern },
+				metadata: m.ok ? m.value : null,
+			};
+			return Promise.all([
+				pluginRenderFragments("head", renderCtx),
+				pluginRenderFragments("bodyEnd", renderCtx),
+			]);
+		});
+		fragmentsP.catch(() => {});
+
+		// Metadata errors return a proper error response with correct status code.
 		let metadata: Metadata | null = null;
-		try {
-			metadata = await loadMetadata(route, params, url, locals, cookies, req);
-		} catch (err) {
+		const meta = await metadataP;
+		if (meta.ok) {
+			metadata = meta.value;
+		} else {
+			const err = meta.err;
 			if (isRedirect(err)) {
 				// Not Response.redirect(): it rejects relative URLs on Workers.
 				return new Response(null, { status: err.status, headers: { Location: err.location } });
@@ -673,21 +713,12 @@ export async function renderSSRStream(
 			// Continue with null metadata — don't break the page for a metadata failure
 		}
 
-		// ── Pre-stream phase: run load() + module imports in parallel before committing to a 200 ──
-		// This ensures HttpError/Redirect from load() can return a proper response before any bytes are sent.
-		const metadataData = metadata?.data ?? null;
 		let data: Awaited<ReturnType<typeof loadRouteData>>;
 		let layoutMods: any[];
 
 		try {
-			// pageMod is already loaded when the cache flag was unknown; otherwise
-			// fold its import into this parallel block instead of a serial await.
 			let pm: any;
-			[data, layoutMods, pm] = await Promise.all([
-				loadRouteData(url, locals, req, cookies, metadataData, match),
-				Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
-				pageMod ?? route.pageModule(),
-			]);
+			[data, layoutMods, pm] = await dataP;
 			pageMod = pm;
 		} catch (err) {
 			if (isRedirect(err))
@@ -739,16 +770,7 @@ export async function renderSSRStream(
 				nonce,
 			);
 
-		const renderCtx: RenderContext = {
-			request: req,
-			url,
-			route: { pattern: route.pattern },
-			metadata,
-		};
-		const [headExtras, bodyEndExtras] = await Promise.all([
-			pluginRenderFragments("head", renderCtx),
-			pluginRenderFragments("bodyEnd", renderCtx),
-		]);
+		const [headExtras, bodyEndExtras] = await fragmentsP;
 
 		// SSR always runs every loader, so coerce types from the optional sparse shape.
 		const layoutDataFull = (data.layoutData as Record<string, any>[]).map((d) => d ?? {});
@@ -779,7 +801,13 @@ export async function renderSSRStream(
 					data.layoutDeps,
 					appHtmlSegments,
 				);
-			return compress(html, "text/html; charset=utf-8", req, 200, data.loaderHeaders);
+			return compress(
+				html,
+				"text/html; charset=utf-8",
+				req,
+				200,
+				withPreloadLink(data.loaderHeaders, route.pattern, true),
+			);
 		}
 
 		// Render-first: run render() before committing to a 200. Failure → proper error page
@@ -821,17 +849,15 @@ export async function renderSSRStream(
 		// compressed — a stream here never streamed, it only skipped compression.
 		// Truly progressive SSR (ROADMAP) would pipe a stream through
 		// CompressionStream instead.
-		const chunks: Uint8Array[] = [
-			enc.encode(
-				buildHtmlShellOpen(
-					metadata?.lang,
-					nonce,
-					appHtmlSegments,
-					data.csr ? route.pattern : undefined,
-				),
-			),
-			enc.encode(buildMetadataChunk(metadata, headExtras, appHtmlSegments)),
-			enc.encode(
+		// One string, encoded once: three encodes plus a concat copied every byte twice.
+		const fullBody = enc.encode(
+			buildHtmlShellOpen(
+				metadata?.lang,
+				nonce,
+				appHtmlSegments,
+				data.csr ? route.pattern : undefined,
+			) +
+				buildMetadataChunk(metadata, headExtras, appHtmlSegments) +
 				buildHtmlTail(
 					body,
 					head,
@@ -846,10 +872,12 @@ export async function renderSSRStream(
 					data.layoutDeps,
 					appHtmlSegments,
 				),
-			),
-		];
-
-		const fullBody = concatChunks(chunks);
+		) as Uint8Array<ArrayBuffer>;
+		// Stored with the cache entry too, so hits carry the same Link header.
+		const headers = withPreloadLink(data.loaderHeaders, route.pattern, data.csr) ?? {};
+		// Set only on a cache write: the client's variant, encoded once at cache
+		// quality and shared by the response and the cache entry.
+		let sent: Encoded | null | undefined;
 
 		// ── Response cache: write after the response has gone out ──
 		// Skip if the handler set cookies — cached response can't reproduce
@@ -865,9 +893,18 @@ export async function renderSSRStream(
 				// after cacheSet ran, so their re-check hits.
 				const rel = releaseMiss;
 				releaseMiss = null;
+				const encoded = encodeForRequest(fullBody, req, "cache");
+				sent = encoded;
 				deferCacheWrite(() => {
 					try {
-						const { gzip, brotli } = buildCompressedVariants(fullBody);
+						const { gzip, brotli } = buildCompressedVariants(
+							fullBody,
+							encoded?.enc === "br"
+								? { brotli: encoded.encoded }
+								: encoded
+									? { gzip: encoded.encoded }
+									: {},
+						);
 						cacheSet(
 							keyForWrite,
 							{
@@ -876,7 +913,7 @@ export async function renderSSRStream(
 								brotli,
 								contentType: "text/html; charset=utf-8",
 								status: 200,
-								extraHeaders: data.loaderHeaders,
+								extraHeaders: headers,
 								tags,
 							},
 							cookies,
@@ -888,7 +925,7 @@ export async function renderSSRStream(
 			}
 		}
 
-		return compressBytes(fullBody, "text/html; charset=utf-8", req, 200, data.loaderHeaders);
+		return compressBytes(fullBody, "text/html; charset=utf-8", req, 200, headers, sent);
 	} finally {
 		releaseMiss?.();
 	}