reactjs - Next.js-before-hydration、Next.js-hydration 和 FCP

Question

我想知道是否有人可以解释什么是计时指标 Next.js-before-hydration和 Next.js-hydration均值，以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子(Hook)的 NextJS 应用程序。
这是性能选项卡测量的屏幕截图，它是一个新的页面加载，它将命中 React 服务器和 SSR。这个特定页面的组件在页面稳定之前也会在客户端重新呈现多次。我从最初的请求开始放大到该区域，并包括初始核心网络生命体征，如 FCP 和 LCP。 (TTI 和 TTFB 在屏幕外出现的时间要晚得多。)

看来Next.js-before-hydration恰好在服务器请求开始时开始。 (幻灯片似乎显示了以前在浏览器中的页面的缩略图，这似乎是一个 devtools 错误，所以忽略它。)Next.js-before-hydration在这个例子中持续 1.48 秒，但对于这个请求，TTFB 只有 120 毫秒，所以我知道它包括的不仅仅是服务器响应时间。
我知道FCP是“TTFB+内容加载时间+渲染时间”，所以我认为Next.js-before-hydration必须是其中的一个子集，但我看过其他网站的示例(ticketmaster.com 就是一个示例)，其中 Next.js-before-hydration 结尾远远超出 FP/FCP 和 Next.js-hydration甚至更晚结束 - 有时就在 onLoad 事件之前(红色 L )。
在我们到达 Next.js-hydration 之前，内容开始逐渐显示。 (在图像中标记为 Next.js...dration)，这让我认为它已经开始运行钩子(Hook)并重新渲染。
那么当 NextJS 从 Next.js-before-hydration 转换时是什么意思？至 Next.js-hydration ?它与“第一次”渲染何时完成(意味着每个组件第一次加载，就像 React Profiler 中的第一次渲染)以及钩子(Hook)何时开始运行有关？
最后，Next.js-hydration的结尾是什么？这两个指标与 FCP 有何关系？

Answer 1

经过几个星期的学习和调查，我想答案基本上是——
FCP 与 Next.js-hydration 几乎没有直接关系。或 Next.js-before-hydration .
部分原因是“渲染”一词的定义混淆。
FCP 确实是“TTFB + 内容加载时间 + 渲染时间”。但在这种情况下，“渲染”与 React 对“渲染”的定义无关。在这种情况下，“渲染”更多地是关于在绘制之前发生的 html 渲染阶段。并且许多浏览器可能会尝试将元素绘制到屏幕上，甚至在 Dom 内容加载完成之前(甚至可能在 domInteractive 之前，我不确定)。
所以，有时 FCP 可能发生在 Next.js-before-hydration 之前已完成，在其他情况下，它可能要到以后才会发生。在问题的示例中，性能测量处于开发模式，这可能会延迟 FCP。
至于Next.js-before-hydration的区别和 Next.js-hydration ，要记住的见解是，在加载所有必要的 react 库之前，甚至不可能进行水合作用。
这意味着 Next.js-before-hydration ，根据定义，包括:

下载初始html(包括TTFB)所花费的时间

通过加载 react 库的必要脚本标签解析初始 html 所花费的时间

下载那些关键的javascript块文件所花费的时间

评估/执行这些 javascript 块文件和加载 react 环境所花费的时间。

只有在那时， react 水合过程才能开始。我相信 react 水化过程是关于处理 react 渲染 #1，并将 react 事件模型附加到作为第一次渲染一部分的所有组件。
只有在 Next.js-hydration 之后完成协调(额外的提交/渲染)成为可能。