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

Posted 2023-04-14

【中文标题】在 NextJS s-s-r 流程中何时以及如何调用 React 生命周期方法？

【英文标题】：When and how are React lifecycle methods called in the NextJS s-s-r process?

【发布时间】：2020-05-16 04:34:17

【问题描述】：

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

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

1234563反应等）到浏览器。这个 html 是在服务器上通过 React 生成的。

在 s-s-r 期间，getInitialProps 在服务器上被调用，并且（我假设）通过 props 将初始数据向下传递到 s-s-r 进程

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

但这是否意味着在客户端第二在原始s-s-r之后第二次渲染，也就是说，交付的原始HTML是被 SPA 取代？

还是保留原来的 s-s-r 内容，但 NextJS 以某种方式“直接”调用 React 生命周期方法？

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

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

非常感谢任何帮助！

【参考方案1】：

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

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

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