React Next.js生产环境带getServerSideProps页面useEffect未触发问题

• 核心错误是直接将 async 函数作为参数传入 useEffect：React 要求 useEffect 的回调只能返回清理函数或无返回值，而 async 函数默认返回 Promise，React 会错误将其当作清理函数调用，触发未捕获异常。
• 该异常仅在含 getServerSideProps 的生产环境复现的原因：
  • 开发环境下此类问题仅会抛出控制台警告，不会阻断后续代码执行，因此请求仍能正常发送
  • 生产环境构建会压缩代码并启用更严格的错误阻断逻辑，未捕获的异常会直接中断当前组件的渲染流程，导致 useEffect 内的请求代码未执行就终止
  • 含 getServerSideProps 的页面走 SSR 渲染流程，服务端预渲染阶段不会执行 useEffect，仅在客户端 hydration 阶段触发该逻辑，因此异常仅在这类页面暴露

方案1：调整useEffect写法（最快修复） #

将异步逻辑封装到 useEffect 内部的独立异步函数中，不要直接把async传入useEffect，示例代码：

useEffect(() => {
  const fetchAuthStatus = async () => {
    try {
      const { data: result } = await axiosApp.get("/auth-status");
      setAuth(result);
    } catch (err) {
      // 自定义错误处理逻辑，避免无限加载
      setAuth({ loggedIn: false });
      console.error("获取身份状态失败", err);
    }
  };
  fetchAuthStatus();
}, []);

同时建议增加请求超时和错误兜底逻辑，避免网络异常也导致页面无限加载。

方案2：SSR侧提前注入鉴权状态（体验优化） #

可以将鉴权逻辑提前到 getServerSideProps 中执行，将获取到的auth状态通过页面的 pageProps 传递给 _app.js 中的 AuthProvider 作为初始值，这样客户端不需要额外发请求，也能避免hydration阶段的异常问题：

// _app.js 中调整AuthProvider初始化
export function AuthProvider({ children, initialAuth = null }) {
  const [auth, setAuth] = useState(initialAuth);
  // 剩下的原有逻辑保持不变
}

在所有带getServerSideProps的页面中，服务端提前请求auth状态注入props即可。

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