Проблема полной гидратации

Гидратация — это процесс, при котором React берёт HTML, сформированный сервером, и добавляет к нему обработчики событий JavaScript. Сервер отправляет начальный HTML (быстро), затем браузер загружает пакет JavaScript, а React выполняет гидратацию статического HTML, делая его интерактивным. До завершения гидратации страница выглядит интерактивной, но таковой не является.

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

Время до интерактивности показывает, сколько времени проходит до того, как пользователь сможет взаимодействовать со страницей. Гидратация непосредственно ограничивает TTI: страница может выглядеть готовой, поскольку HTML, сформированный сервером, уже виден, но кнопки и формы не реагируют, пока React не завершит добавление обработчиков событий. Высокое значение TTI означает плохой пользовательский опыт.

Рассмотрим маркетинговую страницу: 80% содержимого — это неизменяющиеся статические тексты, изображения и заголовки. Только 20% приходится на интерактивные элементы, такие как форма подписки на новости или видеопроигрыватель. При традиционной гидратации SPA обработка всё равно выполняется для 100% страницы, из-за чего статические компоненты обрабатываются без необходимости.

Профилирование производительности в Chrome DevTools показывает затраты на гидратацию. На диаграмме загрузки основного потока можно определить задачу «гидратация React» как длительный блок выполнения JavaScript после первой отрисовки. Чем дольше этот блок, тем сильнее занят основной поток и тем ниже отзывчивость страницы.

Чем больше дерево компонентов React, тем больше работы требует гидратация. React должен посетить каждый компонент, сравнить HTML, сформированный сервером, с тем, что отрисовал бы компонент, и добавить обработчики событий. У сложной страницы с сотнями компонентов накладные расходы на гидратацию могут быть заметны даже на быстрых устройствах.

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

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

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

Исследования команд, занимающихся производительностью веб-приложений, показывают, что разбор и выполнение JavaScript — главная статья затрат на мобильных устройствах. Пакету JavaScript размером 300 КБ требуется 2–3 секунды для разбора на среднестатистическом телефоне Android. Уменьшение объёма JavaScript, отправляемого браузеру, даёт непропорционально большие преимущества по производительности по сравнению с любой оптимизацией внутри React.

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

Как связаны гидратация React и время до интерактивности (TTI)?

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