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

Question

我想知道是否有人能解释一下时间指标Next.js-before-hydration和Next.js-hydration意味着什么，以及它们与FCP的关系。这是用于服务器端呈现和使用客户端钩子的NextJS应用程序。

这里是一个性能选项卡度量的屏幕截图，这是一个新的页面负载，将击中react服务器和SSR。这个特定的页面有一些组件，在页面结束之前，这些组件也会在客户端重新呈现很多次。我已经放大到这个领域，从最初的请求开始，包括最初的核心web生命周期，比如FCP和LCP。(TTI和TTFB很晚才离开屏幕。)

​

​

Next.js-before-hydration似乎正是在服务器请求启动时启动的。(影片中的缩略图显示的是之前浏览器中的缩略图，这看起来像是devtools的错误，所以忽略它。)

在这个例子中，Next.js-before-hydration持续1.48秒，但是对于这个请求，TTFB只有120 so，所以我知道它包含的不仅仅是服务器响应时间。

我知道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时，意味着什么呢？它是否与“第一次”呈现完成时间(意味着每个组件第一次加载时，就像中的第一个呈现)以及钩子何时开始运行有关？

最后，Next.js-hydration的结束意味着什么，以及这两个指标与FCP的关系如何？

Answer 1

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

FCP与Next.js-hydration或Next.js-before-hydration无直接关系。

部分原因是将“呈现”一词的定义合并在一起。

FCP确实是"TTFB +内容加载时间+呈现时间“。但在这种情况下，“呈现”与“呈现”的反应定义无关。在这种情况下，“呈现”更多地是关于在绘制之前发生的html呈现阶段。许多浏览器可能会尝试将元素绘制到屏幕上，甚至在Dom内容完成加载之前(甚至在domInteractive之前，我也不确定)。

因此，有时FCP可能发生在Next.js-before-hydration完成之前，而在其他情况下，它可能要到晚些时候才会发生。在问题的例子中，性能评估处于开发模式，这可能会延迟FCP。

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

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

下载初始html (包括TTFB)所花费的时间(包括TTFB)--通过必要的脚本标记来解析初始html所花费的时间，这些脚本标记加载了environment. libs

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

• )，评估/执行这些javascript块文件所花费的时间，以及加载react

只有在这一点上，反应水化过程才能开始。我认为反应水化过程是关于处理react呈现#1，并将React事件模型附加到第一次呈现的所有组件上。

只有在Next.js-hydration完成协调(额外的提交/呈现)之后，才有可能进行协调。