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。