Прогрессивная гидратация с выборочной гидратацией

Выборочная гидратация — это функция React 18, которая позволяет React начинать гидратацию компонентов сразу после поступления их кода JavaScript, не дожидаясь загрузки JavaScript всей страницы. Каждый независимо разделённый на части участок кода гидратируется по мере загрузки своего пакета, а не всё сразу.

До React 18 гидратация выполнялась по принципу «всё или ничего»: React должен был загрузить весь JavaScript и гидратировать всё дерево, прежде чем какая-либо часть страницы становилась интерактивной. React 18 снимает это ограничение: части дерева гидратируются независимо по мере доступности их кода и данных.

Если пользователь щёлкает по границе Suspense или взаимодействует с ней до завершения гидратации, React немедленно отдаёт приоритет гидратации этого поддерева перед любой другой ожидающей работой. Это означает, что элемент, которым пользователь пытается воспользоваться, станет интерактивным первым, даже если он находится не в начале документа.

Сочетание React.lazy с динамическим импортом и границами Suspense позволяет выполнять выборочную гидратацию компонентов, разделённых на части. Сначала браузер загружает основной пакет JS и сразу гидратирует оболочку. Каждый компонент, загружаемый через lazy-механизм, гидратируется после загрузки его фрагмента — постепенно, по мере того как браузер получает эти фрагменты.

В результате содержимое верхней части экрана становится интерактивным ещё до загрузки JavaScript для нижней части страницы. Пользователь может взаимодействовать с навигацией и CTA главного экрана, пока лента комментариев и виджет рекомендаций ещё загружают свои фрагменты JavaScript.

Выборочная гидратация уменьшает суммарное время блокировки (TBT) — ключевую метрику производительности гидратации. На вкладке «Производительность» в Chrome DevTools длительные задачи, то есть задачи продолжительностью более 50 мс, выделяются красным цветом. До выборочной гидратации можно увидеть одну длительную задачу продолжительностью 300 мс для полной гидратации; после неё — несколько небольших задач, распределённых во времени.

Антишаблон, подрывающий выборочную гидратацию, — импорт всех компонентов в верхней части приложения: import Footer from './Footer'. Из-за этого браузер вынужден загрузить, разобрать и выполнить код Footer до начала любой гидратации. Замените импорты компонентов нижней части страницы на верхнем уровне на React.lazy и динамический импорт.

Используйте const Footer = React.lazy(() => import('./Footer')) для компонентов, расположенных ниже исходной области просмотра. Оберните их в Suspense с простым резервным интерфейсом. Браузер снизит приоритет загрузки пакета Footer до завершения гидратации содержимого верхней части экрана, что естественным образом улучшит TBT.

Потоковая передача и выборочная гидратация дополняют друг друга: потоковая передача отправляет фрагменты HTML, улучшая FCP и LCP, а выборочная гидратация обрабатывает фрагменты JavaScript, улучшая TTI и TBT. Вместе они решают обе задачи производительности: «быстро показать содержимое» и «быстро сделать его интерактивным».

Серверные компоненты React развивают эту идею: серверные компоненты вообще не создают JavaScript для клиента. Гидратировать нужно только клиентские компоненты, помеченные как «use client». Это уменьшает общий объём JavaScript, который требуется гидратировать, и делает выборочную гидратацию ещё эффективнее.

Практический шаблон: используйте renderToPipeableStream для потоковой передачи HTML, оберните страницу в корневой вызов hydrateRoot вместо createRoot, чтобы включить режим гидратации, используйте React.lazy для всех секций ниже первого экрана и оберните каждую секцию в границу Suspense. Остальное React выполнит автоматически.

Как взаимодействие пользователя влияет на приоритет выборочной гидратации в React 18?

Выборочная гидратация позволяет React постепенно гидратировать поддеревья компонентов по мере поступления их JavaScript, не дожидаясь загрузки полного пакета. Взаимодействие пользователя повышает приоритет гидратации выбранного поддерева. React.lazy и динамический импорт содержимого ниже первого экрана в сочетании с границами Suspense обеспечивают такой постепенный подход. Выборочная гидратация и потоковая SSR — взаимодополняющие методы, которые вместе улучшают как доставку содержимого, так и производительность взаимодействия.