Svelte应用head与body为空时出现hydration_mismatch问题求助

问题原因 #

你的app.html已经定义了页面的根<head>和<body>标签，而page.svelte中重复编写这两个标签会引发结构冲突：

• 服务端渲染时，page里的<head>会被嵌套到app.html的<head>内部，<body>会被嵌套到app.html的<body>内部，生成的DOM结构不符合浏览器规范（浏览器会自动修正嵌套，但服务端输出和客户端预期的结构会出现差异）
• 客户端hydration时，SvelteKit对比服务端输出的DOM和客户端要渲染的结构，发现不匹配，从而触发hydration_mismatch警告。

解决方案 #

1. 移除page.svelte中的<head>和<body>标签：页面的根级head和body已经由app.html提供，无需在page组件中重复定义。
2. 添加页面专属头部内容：使用SvelteKit的<svelte:head>标签，它会自动将内容注入到app.html的%sveltekit.head%位置，避免结构冲突。

修改后的page.svelte示例 #

<!-- 页面专属头部内容用svelte:head包裹 -->
<svelte:head>
    <title>自定义页面标题</title>
    <meta name="description" content="页面专属描述">
</svelte:head>

<!-- 页面主体内容直接编写 -->
<div>
    这是页面的主体内容
</div>

验证效果 #

修改后，服务端渲染的DOM结构会和客户端hydration预期的结构完全匹配，hydration_mismatch警告将消失。

内容的提问来源于stack exchange，提问作者Trav