NextJS刷新页面后组件渲染两次是什么原因？

根本原因 #

这是Next.js默认开启React严格模式后，开发环境下的正常预期行为，不是代码bug。
React 18之后，严格模式在开发环境会主动触发一轮「组件挂载→模拟卸载→重新挂载」的重复执行流程，目的是提前排查代码里的不规范问题：比如useEffect漏写清理函数、隐式内存泄漏、组件内存在不符合纯函数要求的随机副作用等，把隐患拦在上线前。
你把console.log直接写在组件函数顶层，组件每次执行渲染都会触发打印，自然会输出两条完全相同的日志。

性能影响说明 #

这套双渲染逻辑完全不会影响生产环境性能。
重复挂载、重复渲染的检查逻辑仅在next dev启动的本地开发环境生效。等你执行next build打包生产版本、正式部署上线后，严格模式的所有开发态检查逻辑都会自动移除，组件只会按业务逻辑正常渲染一次，不存在额外性能开销。

开发态可选处理方式 #

• 推荐做法：保持严格模式默认开启，不要把日志、业务副作用直接写在组件函数顶层，统一放到useEffect中，同时按规范编写对应的副作用清理逻辑，符合React组件开发要求。
• 临时方案：如果开发阶段确实不想看到重复日志，可以在项目根目录的next.config.js中关闭严格模式（非常不推荐，会丢失提前排查代码隐患的能力，反而容易攒出线上bug）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}
module.exports = nextConfig

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