为什么 useEffect 钩子即使没有依赖项仍然在客户端“运行”，即使页面已由 next-js 预渲染

Question

我认为预渲染过程意味着像 useEffect 这样的钩子已经在服务器上执行了。

我读过一些关于水合作用的内容，不知道它是否解释了这种现象，但无法从解释该术语的博客中清楚地理解它。

Answer 1

服务器端的预渲染意味着将您的 React 代码转换为 UI 的最小 HTML 表示形式，这并不意味着您的组件正在安装（即创建元素并将其插入到 DOM 中）或在初始安装/渲染后进行更新。预渲染是 NextJS 特有的，如服务器端渲染/静态页面生成。在初始渲染useEffect后至少运行一次，这里渲染意味着组件初始安装后的安装或更新，而服务器不会明显安装，因此不会在服务器上运行。useEffect

至于水化，它只是一个过程，当浏览器加载时，预渲染/静态页面会转换为动态页面，因为它运行客户端 JavaScript，例如事件侦听器的附件。