Nuxt 4 模式

在构建或调试具有 SSR、混合渲染、路由规则或页面级数据获取的 Nuxt 4 应用时使用。

何时激活

• 服务器 HTML 与客户端状态之间的水合不匹配
• 路由级别的渲染决策，例如预渲染、SWR、ISR 或仅客户端部分
• 围绕懒加载、延迟水合或有效负载大小的性能工作
• 使用 useFetch、useAsyncData 或 $fetch 进行页面或组件数据获取
• 与路由参数、中间件或 SSR/客户端差异相关的 Nuxt 路由问题

水合安全性

• 保持首次渲染是确定性的。不要将 Date.now()、Math.random()、仅限浏览器的 API 或存储读取直接放入 SSR 渲染的模板状态中。
• 当服务器无法生成相同标记时，将仅限浏览器的逻辑移到 onMounted()、import.meta.client、ClientOnly 或 .client.vue 组件后面。
• 使用 Nuxt 的 useRoute() 组合式函数，而不是来自 vue-router 的那个。
• 不要使用 route.fullPath 来驱动 SSR 渲染的标记。URL 片段是仅客户端的，这可能导致水合不匹配。
• 将 ssr: false 视为真正仅限浏览器区域的逃生舱口，而不是解决不匹配的默认修复方法。