Next.js-水化前、Next.js-水化和 FCP

Question

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

这是“性能”选项卡测量的屏幕截图，该屏幕截图显示将影响反应服务器和 SSR 的新页面加载。这个特定页面的组件在页面稳定下来之前也会在客户端重新渲染多次。我从最初的请求开始放大了该区域，包括 FCP 和 LCP 等最初的核心 Web 重要功能。（TTI 和 TTFB 在屏幕上出现的时间要晚得多。）

看起来它Next.js-before-hydration恰好在服务器请求开始时启动。（幻灯片似乎显示了浏览器中之前页面的缩略图，这似乎是一个开发工具错误，因此请忽略它。）

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中标记），这让我认为它已经开始运行挂钩并重新渲染。

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

最后，end ofNext.js-hydration意味着什么？这两个指标与 FCP 有何关系？

Answer 1

经过几周的学习和调查，我认为答案基本上是——

Next.js-hydrationFCP 与或几乎没有直接关系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 块文件以及加载 React 环境所花费的时间。

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

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