Next.js 13预渲染时Cookie无法访问的原因排查

核心原因是预渲染的执行环境和浏览器完全隔离，具体拆解如下：

• 预渲染在服务器端完成：Next.js的预渲染（包括静态生成SSG、服务器端渲染SSR）都是在服务器环境中运行，这里没有浏览器的document或window对象——而你用来读取Cookie的document.cookie是浏览器专属API，服务器端根本调用不了，自然拿不到Cookie。

• 客户端API拦截器不兼容服务器环境：你的authApi拦截器如果是基于客户端逻辑写的（比如用Axios拦截器读取document.cookie），在预渲染阶段服务器执行这段代码时，既没有浏览器环境，也没有请求上下文来获取Cookie——服务器端要获取Cookie，得用Next.js提供的cookies()（App Router）或req.cookies（Pages Router）这类专属API，普通客户端拦截器拿不到这些上下文。

• 你的解决方法本质是切换到客户端执行：让UserMenu在父组件挂载后再渲染，相当于把这个组件的执行时机推迟到了浏览器端运行阶段，这时候已经脱离了服务器预渲染环境，能正常访问浏览器的Cookie API，所以问题解决。

如果想在预渲染阶段就处理认证逻辑，不要用客户端的Cookie读取方式，而是在服务器组件中通过Next.js的cookies()函数获取Cookie，再把认证信息传递给客户端组件使用。

内容的提问来源于stack exchange，提问作者EUNSUN KIM