Что такое гидратация

Гидратация — это процесс, при котором клиентское Angular-приложение повторно использует HTML, отрисованный на сервере, добавляя обработчики событий и состояние к существующему DOM вместо его удаления и повторного рендеринга.

В устаревшем SSR использовалась разрушающая гидратация: клиент удалял DOM сервера и полностью отрисовывал его заново. Это вызывало заметное мерцание и обесценивало работу сервера.

Современный Angular выполняет неразрушающую гидратацию: он обходит существующий DOM, сопоставляет его с деревом компонентов и повторно использует узлы. Нет мерцания, требуется меньше работы и повышается производительность.

Повторное использование HTML сервера означает, что самое крупное содержимое остаётся отрисованным, что помогает показателю LCP, а отсутствие повторного рендеринга предотвращает сдвиги макета, улучшая CLS. Приложение становится интерактивным без повторной отрисовки.

Этап первый: сервер отрисовывает HTML и отправляет его. Этап второй: браузер загружает JS, запускает Angular и гидратирует существующую разметку, делая её интерактивной.

Гидратация предполагает, что дерево компонентов клиента создаёт ту же структуру, которую создал сервер. Если структуры различаются, Angular сообщает о несоответствии при гидратации.

Несоответствия вызывают прямая манипуляция DOM, ветви только для браузера, изменяющие разметку, некорректная вложенность HTML и недетерминированное содержимое, например Math.random() или Date.now() в шаблонах.

Не изменяйте DOM императивно, например с помощью innerHTML за пределами Angular, во время SSR. Позвольте Angular управлять DOM, чтобы клиент и сервер использовали одинаковую структуру.

Если компонент действительно невозможно гидратировать, например сторонний виджет изменяет DOM, отключите для него гидратацию с помощью ngSkipHydration; Angular повторно отрендерит только это поддерево.

Гидратация применяется только тогда, когда есть HTML, отрисованный на сервере, который можно повторно использовать. В чистом приложении CSR нечего гидратировать: гидратация — это клиентская часть SSR.

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

Проверьте, насколько хорошо Вы понимаете гидратацию.

Гидратация повторно использует HTML сервера на клиенте без разрушительных изменений, улучшая LCP и CLS. Несоответствия возникают из-за ручного изменения DOM или недетерминированной разметки; используйте ngSkipHydration как обходной путь. Гидратация — это клиентская часть SSR.