Next.js组件渲染两次是否正常？关闭React Strict Mode仍无效

在App Router模式下，这种渲染两次的现象是正常行为，即使关闭了reactStrictMode也会出现，原因和Next.js的渲染机制直接相关：

• 第一次渲染发生在服务器端：标记了"use client"的组件，Next.js仍然会在服务器端先执行一次渲染，目的是生成静态HTML内容用于首屏快速展示。这一阶段不会触发useEffect（useEffect是React客户端生命周期钩子，服务器端不执行），但组件顶层的console.log("hmmm")会执行。
• 第二次渲染发生在客户端水合（Hydration）阶段：当静态HTML发送到浏览器后，React会将其转换为可交互的客户端组件，这一阶段会再次执行组件渲染，同时触发useEffect内的逻辑。

对应你的代码表现：

• 顶层的console.log("hmmm")会打印两次（服务器端、客户端各一次）
• useEffect里的localStorage操作只会执行一次（仅在客户端阶段），这也和你实际观察到的结果一致。

这种设计是App Router的默认机制，核心是兼顾首屏加载性能与客户端交互能力，不属于异常情况。

如果需要区分服务器端和客户端的渲染逻辑，可以通过环境判断实现：

if (typeof window !== 'undefined') {
  // 仅客户端执行的逻辑
}

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