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

这是一个简单的问题，几乎可以肯定在某个地方的NextJS文档中得到了回答，但是在查找(以及对其进行一些书面搜索)之后，我找不到了。

据我了解，NextJS可以这样工作:

如果您是通过“外部” URL(即不是通过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如何一起工作，以及何时何地发生了什么。

任何帮助，不胜感激!

最佳答案

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

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

关于javascript - 在NextJS SSR流程中何时以及如何调用React生命周期方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59988088/