Что такое гидрация в веб-разработке
Что проверяют
Понимаете ли вы, что серверный HTML сам по себе не интерактивен, и представляете ли цену его оживления. Вопрос проверяет, видит ли кандидат разницу между «страница показалась» и «страница отвечает на нажатия».
Как отвечать
Гидрация это второй проход по уже готовой разметке. Сервер отдаёт HTML, браузер его рисует, затем загружается JavaScript, фреймворк строит своё дерево компонентов, сопоставляет его с существующими узлами и навешивает состояние и обработчики. Саму разметку он при этом не перестраивает, если она совпала.
Отсюда картина метрик: контент и первая отрисовка приходят рано, готовность к взаимодействию наступает позже, и промежуток между ними и есть плата. Пользователь видит кнопку, нажимает, и ничего не происходит.
Дальше стоит показать, чем промежуток сокращают: разделение кода и ленивая загрузка, потоковая отдача с постепенной гидрацией по частям, островная модель, где оживают только интерактивные участки, серверные компоненты, которые в браузер вообще не едут.
Отдельная тема это расхождение разметки. Первый клиентский рендер обязан совпасть с серверным, иначе фреймворк ругается и перерисовывает поддерево заново. Типичные причины: текущее время и случайные числа, форматирование по локали браузера, чтение хранилища прямо в рендере, невалидная вложенность тегов, которую чинит парсер.
Где спотыкаются
Считают гидрацию бесплатной, раз HTML уже пришёл. Оживление стоит загрузки, разбора и исполнения того же объёма кода, и на слабом телефоне именно оно занимает основное время до первого отклика.
Лечат расхождение подавлением предупреждения. Флаг убирает сообщение, но не причину: состояние на клиенте разъезжается с разметкой, и позже это всплывает потерянным вводом или неверным текстом. Значение, зависящее от браузера, выставляют после монтирования.
Требуют серверного рендера везде. Личному кабинету за авторизацией он почти ничего не даёт, зато добавляет серверную нагрузку и целый класс ошибок, которых в браузере не бывает. Выигрыш приносит публичный контент, которому нужны индексация и быстрая первая отрисовка.