Ensure head content rendered once with lazy layouts (#4892)

* Ensure head content rendered once with lazy layouts * Add changeset
withastro · Sep 28, 2022 · ff7ba0e · ff7ba0e
1 parent 649e908
commit ff7ba0e
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 3 deletions.
diff --git a/.changeset/popular-horses-lie.md b/.changeset/popular-horses-lie.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent multiple rendering of head content
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -1212,6 +1212,7 @@ export interface SSRMetadata {
 	pathname: string;
 	hasHydrationScript: boolean;
 	hasDirectives: Set<string>;
+	hasRenderedHead: boolean;
 }
 
 export interface SSRResult {

diff --git a/packages/astro/src/core/render/result.ts b/packages/astro/src/core/render/result.ts
@@ -270,6 +270,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 			renderers,
 			pathname,
 			hasHydrationScript: false,
+			hasRenderedHead: false,
 			hasDirectives: new Set(),
 		},
 		response,

diff --git a/packages/astro/src/runtime/server/render/head.ts b/packages/astro/src/runtime/server/render/head.ts
@@ -12,9 +12,8 @@ const uniqueElements = (item: any, index: number, all: any[]) => {
 	);
 };
 
-const alreadyHeadRenderedResults = new WeakSet<SSRResult>();
 export function renderHead(result: SSRResult): Promise<string> {
-	alreadyHeadRenderedResults.add(result);
+	result._metadata.hasRenderedHead = true;
 	const styles = Array.from(result.styles)
 		.filter(uniqueElements)
 		.map((style) => renderElement('style', style));
@@ -36,7 +35,7 @@ export function renderHead(result: SSRResult): Promise<string> {
 // is called before a component's first non-head HTML element. If the head was
 // already injected it is a noop.
 export async function* maybeRenderHead(result: SSRResult): AsyncIterable<string> {
-	if (alreadyHeadRenderedResults.has(result)) {
+	if (result._metadata.hasRenderedHead) {
 		return;
 	}
 	yield renderHead(result);

diff --git a/packages/astro/test/fixtures/lazy-layout/package.json b/packages/astro/test/fixtures/lazy-layout/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@test/lazy-layout",
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/lazy-layout/src/layouts/Main.astro b/packages/astro/test/fixtures/lazy-layout/src/layouts/Main.astro
@@ -0,0 +1,13 @@
+<html>
+	<head>
+		<title>Testing</title>
+		<style>
+			body {
+				background: green;
+			}
+		</style>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
diff --git a/packages/astro/test/fixtures/lazy-layout/src/pages/index.astro b/packages/astro/test/fixtures/lazy-layout/src/pages/index.astro
@@ -0,0 +1,6 @@
+---
+const Layout = (await import('../layouts/Main.astro')).default;
+---
+<Layout>
+	<div>Stuff here</div>
+</Layout>
diff --git a/packages/astro/test/lazy-layout.test.js b/packages/astro/test/lazy-layout.test.js
@@ -0,0 +1,19 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Lazily imported layouts', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/lazy-layout/' });
+		await fixture.build();
+	});
+
+	it('Renders styles only once', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('link')).to.have.a.lengthOf(1);
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml