关闭React Strict Mode后Next.js组件仍渲染两次的原因排查

以下是几个常见的原因及对应的排查步骤：

1. 未彻底关闭Strict Mode #

如果使用的是Next.js 13+的App Router，仅在next.config.js中设置reactStrictMode: false并不足够——需要检查app/layout.js中是否手动包裹了<React.StrictMode>。即使全局配置关闭了Strict Mode，组件树中的手动Strict Mode标签依然会触发两次渲染。

2. 组件/路由重复渲染 #

• 检查Index.js（Page Router对应pages/index.js）是否多次引入或渲染了LandingPage组件；
• 确认Layout.js是否在多个路由层级被复用，导致LandingPage被间接重复渲染；
• Page Router下还要检查pages/_app.js是否额外渲染了LandingPage，造成重复。

3. 开发环境的额外渲染触发 #

Next.js开发模式的Fast Refresh机制，或文件导入循环，可能导致组件额外渲染。可以在LandingPage的useEffect中添加日志：

useEffect(() => {
  console.log('LandingPage 渲染触发');
}, []);

结合React DevTools的Profiler工具，录制初始加载过程，查看渲染的触发源（是状态变化、props更新还是父组件渲染导致）。

4. 第三方依赖或自定义Hook的副作用 #

检查LandingPage内的自定义Hook、状态管理库（如Redux、Zustand）或第三方组件，是否存在触发组件重复渲染的逻辑。可以逐步注释掉这些部分，观察渲染次数是否恢复正常，定位问题代码。

5. Next.js版本bug #

部分Next.js 13.x早期版本存在关闭Strict Mode后仍触发两次渲染的bug，建议升级到最新稳定版，或对照官方文档确认配置正确性。

快速排查步骤 #

1. 确认next.config.js的配置正确：

module.exports = {
  reactStrictMode: false,
  // 其他配置项
};

2. 移除app/layout.js或pages/_app.js中手动添加的<React.StrictMode>标签；
3. 用React DevTools Profiler分析渲染触发原因；
4. 简化LandingPage组件，逐步排查可疑逻辑。

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