Гидратация страницы: привязка обработчиков и стоимость

Прямой ответ

Гидратация привязывает обработчики к готовой разметке, поэтому страница выглядит отображённой, но не отвечает на действия до завершения привязки.

// разметка уже отображена; гидратация добавляет поведение
hydrate(document.getElementById("app"), { data: window.__STATE__ });

Обработчики привязываются после отображения разметки, поэтому период между отображением и привязкой оставляет интерфейс неотвечающим. О рендеринге — в статье про SSR.

Что выполняет гидратация и почему она нужна

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

Привязка обработчиков. Обработчики событий подключаются к элементам разметки, поэтому действие пользователя обрабатывается приложением.

Восстановление состояния. Состояние приложения восстанавливается из переданных данных, поэтому отображение соответствует состоянию.

Соответствие разметке. Гидратация проверяет соответствие разметки ожидаемой структуре, поэтому расхождение обнаруживается при привязке.

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

Отдельный аспект — расхождение разметки. Разметка, сформированная на сервере иначе, чем ожидается на клиенте, приводит к расхождению при привязке, поэтому часть разметки пересоздаётся.

Стоимость гидратации и блокировка взаимодействия

Стоимость гидратации определяется объёмом выполняемого кода, поэтому большой набор компонентов увеличивает период неотвечающего интерфейса.

Объём кода. Привязка каждого компонента выполняет код, поэтому время гидратации растёт с числом компонентов.

Блокировка основного потока. Выполнение кода занимает основной поток, поэтому действия пользователя не обрабатываются до завершения.

Отложенная привязка. Привязка части компонентов откладывается до момента взаимодействия, поэтому период блокировки сокращается.

Практическое следствие: страница с большим числом компонентов гидратируется долго, поэтому интерфейс не отвечает на действия в течение всего периода привязки.

Способы сокращения стоимости

Объём гидратации сокращается привязкой только интерактивных частей, поэтому статическая разметка не требует выполнения кода.

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

Отложенная привязка по взаимодействию. Компонент гидратируется при первом действии пользователя, поэтому начальный период блокировки сокращается.

Сокращение объёма данных. Состояние, передаваемое для гидратации, ограничивается необходимым, поэтому объём обработки сокращается.

Практическое следствие: гидратация всей страницы, включая статические области, выполняет код без пользы, поскольку статическая разметка не требует обработчиков.

О частичной гидратации — в статье про islands architecture; о метриках — в статье про Core Web Vitals.

Передача состояния и объём данных

Состояние, передаваемое для гидратации, определяет объём обработки, поэтому состав передаваемых значений выбирается по необходимости.

Состав состояния. В разметку передаются значения, необходимые для восстановления интерфейса, поэтому лишенные необходимости данные не включаются.

Объём передачи. Большое состояние увеличивает размер ответа, поэтому загрузка страницы замедляется вместе с ростом объёма.

Повторный запрос. Значение, не переданное в состоянии, запрашивается на клиенте отдельно, поэтому число обращений к источнику растёт.

Практическое следствие: передача полного набора данных источника в состоянии увеличивает объём ответа без пользы, поскольку часть значений не используется при гидратации.

Отдельный аспект — расхождение данных. Значение, загруженное на сервере и запрошенное повторно на клиенте, может отличаться, поэтому отображение изменяется после гидратации, и пользователь видит смену содержимого.

Практика: снижение стоимости гидратации

1. Гидратируйте только интерактивные компоненты. Статическая разметка не требует обработчиков, поэтому привязка не выполняется.

2. Откладывайте привязку до первого взаимодействия. Начальный период блокировки интерфейса сокращается.

3. Ограничивайте объём передаваемого состояния. Обработка данных сокращается, поэтому время гидратации падает.

4. Проверяйте соответствие серверной и клиентской разметки. Расхождение приводит к пересозданию части разметки при привязке.

5. Сокращайте число компонентов на странице. Время гидратации растёт с числом привязываемых компонентов.

6. Измеряйте время блокировки взаимодействия. Период неотвечающего интерфейса подтверждается измерением.

7. Переносите тяжёлую логику за пределы гидратации. Выполнение при привязке сокращается, поэтому блокировка уменьшается.

Рекомендации:

1. Не гидратируйте статические области страницы. Выполнение кода без обработчиков не даёт интерактивности, но занимает основной поток.
2. Учитывайте период неотвечающего интерфейса. Содержимое отображено, но действия не обрабатываются до завершения привязки.
3. Сопоставляйте объём гидратации с числом компонентов. Большой набор компонентов увеличивает время привязки.
4. Фиксируйте измерение метрик до и после изменения. Влияние на блокировку подтверждается измерением.
5. Пересматриваем набор гидратируемых компонентов при изменении страницы. Новый компонент требует оценки необходимости привязки.

Практический сценарий: интерфейс не отвечал несколько секунд после отображения

Контекст: страница отображала содержимое быстро, но нажатия не обрабатывались в течение нескольких секунд на устройствах среднего уровня.

1. Диагностика. Измерение показало, что основной поток был занят выполнением кода привязки всех компонентов страницы. Содержимое отображалось из серверной разметки, но обработчики подключались к каждому компоненту последовательно.
2. Причина. Гидратация выполнялась для всей страницы, включая области без интерактивности, поэтому объём выполняемого кода превышал необходимый.
3. Действия. (а) Ограничили гидратацию компонентами с обработчиками, чтобы статические области не привязывались; (б) отложили привязку части компонентов до первого взаимодействия, чтобы начальный период блокировки сократился; (в) сократили объём передаваемого состояния, оставив только необходимые значения; (г) перенесли тяжёлую инициализацию за пределы гидратации, чтобы выполнение при привязке сократилось; (д) измерили время блокировки до и после изменения и зафиксировали сокращение.
4. Результат. Интерфейс отвечает на действия сразу после отображения, поскольку привязываются только интерактивные компоненты.

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

FAQ

Что такое гидратация страницы? Привязка обработчиков и восстановление состояния приложения для уже отображённой серверной разметки.

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

Как сократить стоимость гидратации? Привязкой только интерактивных компонентов и отложенной гидратацией до первого взаимодействия.

К чему приводит расхождение серверной и клиентской разметки? Часть разметки пересоздаётся при привязке, поэтому время гидратации растёт и отображение может измениться.

Источники: web.dev Rendering on the Web, web.dev TBT, HTML scripting — ссылки в шапке.