Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё оживляет интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра.
Angular давно умеет рендерить страницы на сервере, но только с недавних пор появился реальный контроль над тем, как и когда приложение становится интерактивным. Речь об инкрементальной гидратации — механизме, который позволяет браузеру оживлять интерфейс частями, а не целиком. Это маленькое изменение в стратегии даёт большой эффект на восприятие производительности.
Почему полная гидратация — это вчерашний день
В классическом подходе Angular гидратирует всё приложение сразу. Это значит, что:
загружаются все скрипты, включая те, что нужны лишь в футере;
инициализируются все компоненты, даже те, что находятся за пределами экрана;
тратятся ресурсы на то, что может вообще не понадобиться в текущей сессии.
В результате браузер перегружается работой, пользователь кликает по кнопке в хедере, а отклик — с задержкой. Это не баг, это просто устаревший способ.
Новая философия: делай меньше, но вовремя
Инкрементальная гидратация предлагает другой путь: активировать только те части страницы, которые действительно нужны сейчас. Всё остальное — позже, по требованию. Angular позволяет отложить инициализацию компонентов до:
первого взаимодействия (например, пользователь нажал кнопку),
появления элемента в зоне видимости (при прокрутке),
завершения первичных задач браузера (в состоянии idle),
наступления таймера (через 5–10 секунд после загрузки).
Таким образом, у нас есть возможность расставить приоритеты: что загружается сразу, а что — потом, не мешая главному потоку.
Как это ощущается для пользователя
Представим страницу интернет-магазина: сверху — каталог, посередине — фильтры, ниже — отзывы и рекомендации. Классический Angular загрузил бы всё сразу, даже если пользователь просто пролистал до первого товара. А вот с инкрементальной гидратацией:
видимый каталог — интерактивен с первых секунд,
фильтры активируются, только если пользователь с ними взаимодействует,
отзывы грузятся, когда пользователь доскроллил до них,
рекомендации подтягиваются позже, чтобы не мешать основному сценарию.
Пользователь видит полноценный интерфейс, но браузер делает минимально необходимую работу. Визуально — всё стабильно. Наощупь — отзывчиво. И это главное.
Выгода не только в UX
Инкрементальная гидратация — это не просто «удобство», это инструмент экономии:
Меньше JavaScript: чем меньше инициализированных компонентов — тем меньше кода нужно грузить.
Быстрее загрузка: меньше блокирующих задач — выше шанс уложиться в требования Core Web Vitals.
Экономия ресурсов: особенно важно для мобильных пользователей на слабых устройствах.
С точки зрения бизнеса это значит: сайт работает быстрее → пользователь меньше ждёт → выше конверсия. Простая формула, которая работает.
Как разработчик управляет этим
В Angular инкрементальная гидратация реализована просто: достаточно обернуть часть шаблона в специальную конструкцию (@defer) и задать триггер. Например:
@defer (hydrate on viewport) {
<product-list-component></product-list-component>
}
Это значит: компонент отрисуется на сервере как обычный HTML, но станет интерактивным только после того, как окажется в поле зрения пользователя. Браузер не тратит силы раньше времени. При этом, если пользователь вдруг начнёт взаимодействовать с этим компонентом до гидратации — Angular сохранит событие и отработает его позже. Никаких «мертвых зон», никаких потерянных кликов.
Не магия, а современная инженерия
Мне нравится думать об инкрементальной гидратации не как о технической фиче, а как о новом способе думать о приложениях. Мы переходим от парадигмы всё сразу к модели по мере надобности. Это не только про оптимизацию, это про уважение к вниманию пользователя. Покажи главное. Позволь начать работу. Остальное — потом.
Angular догнал и, в чём-то, обогнал подходы других фреймворков. Теперь у нас есть всё, чтобы строить быстрые, адаптивные, умные интерфейсы, не переплачивая в сложности.
Если вы работаете с Angular и заботитесь о производительности — попробуйте инкрементальную гидратацию. Это одно из тех улучшений, которое «просто работает», но меняет всё.
