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

如何解决Next.js-before-hydration、Next.js-hydration 和 FCP

我想知道是否有人可以解释计时指标 Next.js-before-hydration 和 Next.js-hydration 的含义，以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子的 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），这让我觉得它是已经开始运行钩子并重新渲染。

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

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

解决方法

经过几个星期的学习和调查，我想答案基本上是——

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 之间的区别，要记住的见解是，在加载所有必要的反应库之前，甚至不可能进行水合。

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

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

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

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