window 坑

服务端组件在 Node 环境执行，没有 window。如果在服务端组件里直接写 window.innerWidth，会在构建/服务端渲染时直接抛 ReferenceError: window is not defined，导致 build 失败。

❌ 错误写法（服务端组件里直接读 window）：

// 服务端组件（默认）
export default function Page() {
  return <div>{window.innerWidth}</div> // 构建期就报错
}

正确做法：把读 window 的逻辑放进客户端组件，用 useEffect 包住（只在浏览器执行）。下面两个客户端组件对比：

⚠️ 渲染期读 window（会 mismatch）

window.innerWidth = undefined

打开浏览器 Console，会看到 hydration 警告：服务端渲染的undefined 和客户端渲染的真实值不一致。

✅ useEffect 里读 window（正确）

window.innerWidth = 加载中…

服务端先渲染"加载中…"，浏览器水合后 useEffect 执行，才读出真实宽度。无 mismatch。