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

gv8xihay  于 2023-04-30  发布在  React
关注(0)|答案(1)|浏览(130)

这是一个简单的问题,几乎可以肯定在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是如何协同工作的,以及何时何地发生了什么。

ttygqcqt

ttygqcqt1#

但是这是否意味着在原始SSR之后,在客户端上存在第二次呈现,也就是说,原始的HTML被SPA替换?
你所描述的是所谓的“复水”过程。Next将返回服务器端内容,然后通过效果(例如:例如,useEffect)或数据获取客户端侧(例如,useEffect)例如,SWR)。
我建议观看this video,以获得Next的首席维护者Tim的更详细解释。js。

相关问题