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

【问题标题】：When and how are React lifecycle methods called in the NextJS SSR process?在 NextJS SSR 流程中何时以及如何调用 React 生命周期方法？
【发布时间】：2020-05-16 04:34:17
【问题描述】：

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

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

在 SSR 期间，getInitialProps 在服务器上被调用，并且（我假设）通过 props 将初始数据向下传递到 SSR 进程
然后调用 React 生命周期方法 (componentDidMount /useEffect)。应用程序仍然可以通过props 访问初始数据。据我了解，这些生命周期方法是在客户端调用的——这就是我的console.log 告诉我的——因此可以保证您可以访问诸如localStorage 之类的东西。
但这是否意味着在客户端第二在原始SSR之后第二次渲染，也就是说，交付的原始HTML是被 SPA 取代？
还是保留原来的 SSR 内容，但 NextJS 以某种方式“直接”调用 React 生命周期方法？

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

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

非常感谢任何帮助！

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

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

您所描述的是所谓的“补液”过程。 Next 将返回服务器端内容，然后在客户端通过效果（例如，useEffect）或数据获取客户端（例如，SWR）进行再水化。

我建议观看 this video 以获得来自 Next.js 的主要维护者 Tim 的更详细解释。

【讨论】：