在 NextJS SSR 过程中何时以及如何调用 React 生命周期方法？

Question

这是一个简单的问题，几乎可以肯定在某个地方的 NextJS 文档中得到了回答，但是经过查找（以及谷歌搜索有关它的一些文章）我找不到它。

据我了解，NextJS 是这样工作的：

• 如果您从“外部” URL 到达您的应用程序，即不是通过Link，那么该页面是 SSR 的，并且 NextJS 将 HTML 与 JS（NextJS 框架、React 等）的组合发送到浏览器。这个 HTML 是通过 React 在服务器上生成的。

• 在服务器上getInitialProps调用SSR 期间，（我假设）通过以下方式将初始数据传递给 SSR 进程props

• 然后调用 React 生命周期方法（componentDidMount/ useEffect）。应用程序仍然可以通过 访问初始数据props。据我了解，这些生命周期方法是在客户端上调用的——这就是我console.log告诉我的——因此你可以保证访问诸如localStorage.

• 但这是否意味着在原始SSR之后在客户端有第二次渲染，即原始交付的HTML被SPA替换？

• 或者是否保留了原始 SSR 内容，但 NextJS 以某种方式“直接”调用了 React 生命周期方法？

部分问题是我对 React 内部如何工作一无所知——屏幕绘制和生命周期方法彼此之间有什么关系。

我试图了解 NextJS 是如何工作的——流程到底是什么，NextJS 的 SSR 和 React 如何协同工作，以及在何时何地发生了什么。

非常感谢任何帮助！

Answer 1

但这是否意味着在原始SSR之后，客户端是否还有第二次渲染，即原始交付的HTML被SPA替换？

你所描述的就是所谓的“补液”过程。接下来将返回服务器端内容，然后通过效果（例如useEffect）或数据获取客户端（例如SWR）在客户端重新水化。

我建议观看此视频，了解 Next.js 的首席维护者 Tim 的更详细解释。