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

Question

我想知道是否有人可以解释计时指标 Next.js-before-hydration 和 Next.js-hydration 的含义，以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子的 NextJS 应用程序。

这是一个性能标签测量的屏幕截图，它是一个新的页面加载，它将影响反应服务器和 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），这让我觉得它已经开始运行了钩子并重新渲染。

那么 NextJS 从 Next.js-before-hydration 转换到 Next.js-hydration 是什么意思呢？它是否与“第一次”渲染完成的时间（即每个组件第一次加载，如 React Profiler 中的第一次渲染）以及钩子何时开始运行有关？

最后，Next.js-hydration 的结尾是什么意思，这两个指标与 FCP 有什么关系？

Answer 1

又经过几周的学习和考察，我想答案基本上是——

FCP 与Next.js-hydration 或Next.js-before-hydration 几乎没有直接关系。

其中一部分是“渲染”一词的定义的混淆。

FCP 确实是“TTFB + 内容加载时间 + 渲染时间”。但在这种情况下，“render”与“render”的 React 定义无关。在这种情况下，“渲染”更多的是关于绘制之前发生的 html 渲染阶段。许多浏览器可能会尝试在屏幕上绘制元素，甚至在 Dom 内容完成加载之前（甚至可能在 domInteractive 之前，我不确定）。

因此，有时 FCP 可能会在 Next.js-before-hydration 完成之前发生，而在其他情况下，可能要等到稍后才会发生。在问题的示例中，性能测量处于开发模式，这可能会延迟 FCP。

至于Next.js-before-hydration 和Next.js-hydration 之间的区别，要记住的是，在加载所有必要的反应库之前，甚至不可能进行水合。

这意味着Next.js-before-hydration，根据定义，包括：

• 下载初始 html（包括 TTFB）所花费的时间
• 通过加载反应库的必要脚本标签解析初始 html 所花费的时间
• 下载那些关键的 javascript 块文件所花费的时间
• 评估/执行这些 javascript 块文件以及加载反应环境所花费的时间。

只有在那个时候反应水合过程才能开始。我相信反应水合过程是关于处理 React 渲染 #1，并将反应事件模型附加到作为第一次渲染一部分的所有组件。

只有在Next.js-hydration 完成之后，协调（额外的提交/渲染）才成为可能。