Гидратация (Hydration) — это процесс, при котором уже отображённая в браузере HTML-страница становится полностью интерактивной за счёт подключения и выполнения JavaScript. Термин чаще всего используется в современных веб-приложениях, построенных с использованием SSR (Server-Side Rendering) или статической генерации страниц.
При серверном рендеринге пользователь получает готовую веб-страницу практически сразу после открытия сайта. Однако на этом этапе страница представляет собой лишь статическую разметку. Чтобы начали работать кнопки, формы, выпадающие меню, фильтры и другие элементы интерфейса, браузер должен загрузить JavaScript и «привязать» его к уже существующему HTML. Именно этот процесс и называется гидратацией.
Упрощённо процесс выглядит следующим образом:
Главное преимущество такого подхода заключается в том, что пользователь видит содержимое страницы практически сразу, не ожидая полной загрузки приложения. Это положительно влияет на скорость первого отображения контента и показатели Core Web Vitals.
Гидратация особенно широко применяется в современных JavaScript-фреймворках:
Использование гидратации позволяет объединить преимущества SSR (Server-Side Rendering) и CSR (Client-Side Rendering). Пользователь быстро получает готовую страницу, а после завершения гидратации может полноценно взаимодействовать с интерфейсом без дополнительных перезагрузок.
Однако процесс гидратации также требует ресурсов браузера. Если JavaScript-кода слишком много или он плохо оптимизирован, пользователь может столкнуться с задержками при взаимодействии с сайтом. В некоторых случаях визуально страница уже отображается, но отдельные элементы ещё не реагируют на действия пользователя.
Современные технологии всё чаще используют не полную, а частичную гидратацию, при которой JavaScript подключается только к интерактивным элементам. Это позволяет сократить объём загружаемого кода, ускорить работу сайта и улучшить пользовательский опыт.