Next.js预渲染页面后，无依赖的useEffect为何仍在客户端执行？

• 服务器预渲染阶段：useEffect完全不执行
  React在服务器端做预渲染时，只会运行组件的同步渲染逻辑——也就是组件函数里return语句之前的同步代码（比如state初始化、props计算、JSX结构生成），所有副作用类Hook（useEffect、useLayoutEffect）都会被直接跳过。
  原因很简单：服务器没有浏览器的DOM环境，也不需要处理客户端特有的副作用（比如绑定事件监听、操作DOM、发起客户端专属的网络请求），预渲染的唯一目标是生成静态HTML字符串。

• Hydration阶段：useEffect在客户端执行
  Hydration是客户端浏览器把服务器返回的静态HTML，转换成可交互React应用的过程。这个过程完全在客户端进行：

  1. React会先在客户端重新执行一遍组件的同步渲染逻辑（和服务器端保持一致，避免HTML与客户端组件树不匹配）；
  2. 当hydration完成后，React才会执行useEffect的回调函数（包括首次渲染的effect）。

• 举个直观的代码例子：

function Example() {
  const [msg, setMsg] = useState("Initial");

  // 此effect仅在客户端执行
  useEffect(() => {
    console.log("useEffect 触发（仅客户端）");
    setMsg("Hydrated");
  }, []);

  // 此同步代码在服务器+客户端hydration时都会执行
  console.log("组件渲染逻辑执行（服务器/客户端）");

  return <div>{msg}</div>;
}

服务器端只会输出<div>Initial</div>，并打印"组件渲染逻辑执行（服务器/客户端）"；客户端hydration时先打印同样的渲染日志，之后才会触发useEffect，修改state并更新DOM。

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