本文详解 Nuxt 3 在服务端渲染（SSR）与客户端水合（hydration）过程中因重复执行随机逻辑导致的变量值不一致问题，核心在于 useState() 如何实现服务端生成值的可靠复用，避免 UI 表现与数据错位。
本文详解 nuxt 3 在服务端渲染（ssr）与客户端水合（hydration）过程中因重复执行随机逻辑导致的变量值不一致问题，核心在于 `usestate()` 如何实现服务端生成值的可靠复用，避免 ui 表现与数据错位。
在 Nuxt 3 的 Universal 渲染模式下，页面会经历两次“初始化”：一次在服务端（用于生成首屏 HTML），另一次在客户端（用于激活交互逻辑）。这种双阶段渲染机制虽提升了首屏体验与 SEO，但也埋下了状态不一致的隐患——尤其是当组件中存在非纯函数逻辑（如 Math.random()）时。
你遇到的问题正是典型表现：cDummy 在服务端计算出一个随机项（例如 ['Gauss', 'email@gauss.com']），该值被嵌入初始 HTML 并发送至浏览器；但客户端挂载时，<script setup></script> 再次执行，又生成了一个全新随机项（例如 ['Einstein', 'email@einstein.com']）。此时，isLogin 切换触发 DOM 更新，v-if 控制的 <input> 元素被重新创建或复用，而其 placeholder 绑定的 cDummy[0] 和 cDummy[1] 却分别来自两次独立计算——导致姓名与邮箱“错配”。
✅ 正确解法：使用 useState() 实现 SSR 安全的状态共享
useState() 是 Nuxt 3 提供的专用状态管理工具，它能确保：
- 服务端首次计算的值被序列化进 HTML（通过
window.__NUXT__上下文）； - 客户端水合时跳过初始化函数，直接复用服务端已生成的值；
- 同时保持响应式，支持后续
ref式的读写操作。
将原代码修改如下：
<script setup lang="ts">
import { useState } from '#app'
const isLogin = ref(true)
const dummyData = [
['Euclid', '<a class="__cf_email__" data-cfemail="ed88988e818489ad8a9f88888e88c3828189" href="/cdn-cgi/l/email-protection">[email​protected]</a>'],
['Gauss', '<a class="__cf_email__" data-cfemail="284f495d5b5b6845495c40064341464f" href="/cdn-cgi/l/email-protection">[email​protected]</a>'],
['Einstein', '<a class="__cf_email__" data-cfemail="4928252b2c3b3d093b2c25283d203f2c673921303a" href="/cdn-cgi/l/email-protection">[email​protected]</a>'],
]
// ✅ 替换为 useState：服务端生成 + 客户端复用
const cDummy = useState('cDummy', () =>
dummyData[Math.floor(Math.random() * dummyData.length)]
)
</script>? 关键细节说明
'cDummy'是全局唯一状态 key，建议语义化且避免冲突（如加前缀auth-dummy-）；- 初始化函数
() => ...仅在服务端执行一次，客户端 hydration 时忽略；- 返回值是
Ref<t></t>，可直接在模板中使用（无需.value）；- 若需在组合式 API 中读写，仍按
cDummy.value访问（但本例中仅需读取，无需手动赋值）。
⚠️ 注意事项与进阶建议
-
不要在
useState初始化函数中依赖客户端环境：如window.innerWidth、navigator.userAgent等，在服务端不可用，会导致报错或降级行为； -
避免在
setup中多次调用useState同名 key：Nuxt 会警告并返回首次注册的实例，但逻辑应保持幂等； -
若需动态刷新 dummy 数据（如点击“换一组”按钮），可封装为方法：
const refreshDummy = () => { cDummy.value = dummyData[Math.floor(Math.random() * dummyData.length)] } -
替代方案对比：
- ❌
useCookie()/useLocalStorage()：适合持久化，但首次访问无值，仍会触发服务端/客户端不一致； - ❌
definePageMeta()或useRoute()：不适用于组件内局部状态； - ✅
useState()是 Nuxt 3 官方推荐的、专为 SSR/hydration 场景设计的轻量级状态桥接方案。
- ❌
通过 useState()，你不仅修复了 placeholder 错配问题，更建立了一种可预测、可调试、服务端友好的状态管理模式——这是构建稳定 Nuxt 3 应用的关键实践之一。
