SSR 阶段访问 zustand persist 内部 API 会白屏

2026年5月23日

现象

layout 里写 useState(() => useAuthStore.persist.hasHydrated())。从 localhost 走客户端路由进 dashboard 一切正常,但直接粘贴 dashboard 的 URL 刷新会走 SSR,页面返回 500,日志报 Cannot read properties of undefined (reading 'hasHydrated')

根因

zustand 的 persist middleware 在 SSR 或 Node 端不挂 persist 命名空间,因为那里没有 localStorage。于是 useAuthStore.persist 是 undefined。

修复

初始值给 false,在 mount 之后再翻转 gate。

const [hydrated, setHydrated] = useState(false);
useEffect(() => setHydrated(true), []);

这样 SSR 和首次 client paint 渲染的是同一个 null 或 loading 状态,全程不读 persist API。

nextjszustand踩坑