这是一个简单的问题,几乎可以肯定在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是如何协同工作的,以及何时何地发生了什么。
1条答案
按热度按时间ttygqcqt1#
但是这是否意味着在原始SSR之后,在客户端上存在第二次呈现,也就是说,原始的HTML被SPA替换?
你所描述的是所谓的“复水”过程。Next将返回服务器端内容,然后通过效果(例如:例如,
useEffect
)或数据获取客户端侧(例如,useEffect
)例如,SWR)。我建议观看this video,以获得Next的首席维护者Tim的更详细解释。js。