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

Question

这是一个简单的问题，几乎可以肯定在某处的 NextJS 文档中得到了回答，但是在查看(以及谷歌搜索有关它的一些文章)之后，我找不到它。

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

如果您从“外部”网址访问您的应用程序，也就是说，不是通过 Link ，然后页面是 SSR 的，NextJS 将 HTML 与 JS(NextJS 框架、React 等)的组合发送到浏览器。该 HTML 是通过服务器上的 React 生成的。

SSR期间getInitialProps在服务器上调用并且(我假设)通过 props 将初始数据向下传递到 SSR 进程

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

但这是否意味着在原来的 SSR 之后在客户端有第二次渲染，也就是原来交付的 HTML 被 SPA 替代了？

还是原始的 SSR 内容仍然存在，但 NextJS 以某种方式“直接”调用了 React 生命周期方法？

部分问题是我对 React 内部如何工作的了解为零——绘制屏幕和生命周期方法之间的关系。

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

非常感谢任何帮助!

Answer 1

But does this imply that is there a second render on the client-side after the original SSR, that is, the original HTML delivered is replaced by the SPA?

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

我会推荐观看 this video Next.js 的主要维护者 Tim 提供了更详细的解释。