gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 16:26:34 25 4
gpt4 key购买 nike

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

据我了解,NextJS 是这样工作的:

  • 如果您从“外部”网址访问您的应用程序,也就是说,不是通过 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 如何协同工作,以及何时何地发生了什么。

    非常感谢任何帮助!

    最佳答案

    But does this imply that is there a second render on the client-side after the original SSR, that is, the original HTML delivered is replaced by the SPA?



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

    我会推荐观看 this video Next.js 的主要维护者 Tim 提供了更详细的解释。

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

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com