Мне было интересно, может ли кто-нибудь объяснить, что означают временные метрики Next.js-before-hydration и Next.js-hydration и как они соотносятся с FCP. Это для приложения NextJS, которое рендерит на стороне сервера и использует хуки на стороне клиента.
Вот снимок экрана с измерением вкладки «Производительность», на котором показана свежая загрузка страницы, которая попадет на реагирующий сервер и SSR. Эта конкретная страница имеет компоненты, которые также несколько раз повторно визуализируются на стороне клиента, прежде чем страница завершится. Я увеличил масштаб до области, начиная с первоначального запроса и включая начальные основные веб-приложения, такие как FCP и LCP. (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 на изображении), что заставляет меня думать, что он уже начинает запускать хуки и повторный рендеринг.
Итак, что это значит, когда NextJS переходит с Next.js-before-hydration на Next.js-hydration? Связано ли это с окончанием первого рендеринга (имеется в виду, когда каждый компонент загружается в первый раз, как первый рендер в React Profiler) и когда начинают выполняться хуки?
Наконец, что означает конец Next.js-hydration и какое отношение эти два показателя имеют к FCP?
