什么是 hydration mismatch（水合不匹配）？如何避免？

服务端渲染的 HTML 与客户端首次渲染的结构/文本不一致，React/Vue 会丢弃服务端 DOM 重新渲染，并报警告，严重时导致闪烁/状态错乱。

常见原因：

1. 直接使用 Date.now() / Math.random() 生成内容（两端值不同）
2. 依赖 window / localStorage 立即渲染（服务端无值）
3. 根据浏览器特性（如登录态）在服务端渲染了与客户端不同的 UI
4. ID 不一致（如用 random 生成 key/id，而非 useId）

// 错误：服务端/客户端随机数不同
<span>{Math.random()}</span>
// 正确：用 useId 或延迟到客户端副作用里生成

避免：用 useId 生成 id；把依赖浏览器环境的值放到 useEffect/onMounted 里设置（先渲染占位，注水后再填）。

同分类其他题目