SSR should only render one <title> (#4250)

Author: tanhauhau

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Fix reactive assignments with destructuring and stores where the destructured value should be undefined ([#4170](https://github.com/sveltejs/svelte/issues/4170))
 * Fix hydrating `{:else}` in `{#each}` ([#4202](https://github.com/sveltejs/svelte/issues/4202))
 * Do not automatically declare variables in reactive declarations when assigning to a member expression ([#4212](https://github.com/sveltejs/svelte/issues/4212))
+* Only render one `<title>` in SSR mode when multiple components provide one ([#4250](https://github.com/sveltejs/svelte/pull/4250))
 
 ## 3.16.7
 

src/compiler/compile/render_ssr/handlers/Title.ts

@@ -1,10 +1,16 @@
 import Renderer, { RenderOptions } from '../Renderer';
 import Title from '../../nodes/Title';
+import { x } from 'code-red';
 
 export default function(node: Title, renderer: Renderer, options: RenderOptions) {
+	renderer.push();
+
 	renderer.add_string(`<title>`);
 
 	renderer.render(node.children, options);
 
 	renderer.add_string(`</title>`);
+	const result = renderer.pop();
+
+	renderer.add_expression(x`($$result.title = ${result}, "")`);
 }

src/runtime/internal/ssr.ts

@@ -103,12 +103,13 @@ export function create_ssr_component(fn) {
 			on_destroy = [];
 
 			const result: {
+				title: string;
 				head: string;
 				css: Set<{
 					map: null;
 					code: string;
 				}>;
-			} = { head: '', css: new Set() };
+			} = { title: '', head: '', css: new Set() };
 
 			const html = $$render(result, props, {}, options);
 
@@ -120,7 +121,7 @@ export function create_ssr_component(fn) {
 					code: Array.from(result.css).map(css => css.code).join('\n'),
 					map: null // TODO
 				},
-				head: result.head
+				head: result.title + result.head
 			};
 		},
 

test/server-side-rendering/samples/head-multiple-title/A.svelte

@@ -0,0 +1,3 @@
+<svelte:head>
+	<title>A</title>
+</svelte:head>

test/server-side-rendering/samples/head-multiple-title/B.svelte

@@ -0,0 +1,3 @@
+<svelte:head>
+	<title>B</title>
+</svelte:head>

test/server-side-rendering/samples/head-multiple-title/_expected-head.html

@@ -0,0 +1 @@
+<title>B</title>

test/server-side-rendering/samples/head-multiple-title/_expected.html

@@ -0,0 +1,3 @@
+{
+	"adjective": "custom"
+}

test/server-side-rendering/samples/head-multiple-title/data.json

@@ -0,0 +1,10 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+</script>
+
+<svelte:head>
+	<title>Main</title>
+</svelte:head>
+<A />
+<B />