Гидратация (веб-разработка)

В веб-разработке гидратация (англ. англ. hydration), или регидратация, — техника, при которой клиентский JavaScript преобразует веб-страницу, которая является статической с точки зрения браузера и получена в результате статического или серверного рендеринга, в динамическую. Это достигается путём присоединения обработчиков событий к HTML-элементам в объектной модели документа (DOM)^[1]. Поскольку HTML предварительно отрисовывается на сервере, это обеспечивает быструю «первую содержательную отрисовку» (First Contentful Paint, FCP), то есть момент, когда пользователю впервые отображаются полезные данные. Однако после этого наступает период, в течение которого страница выглядит полностью загруженной и интерактивной, но на самом деле таковой не является до тех пор, пока не будет выполнен клиентский JavaScript и не будут присоединены обработчики событий^[2].

Фреймворки, использующие гидратацию, включают Next.js^[3] и Nuxt.js^[4]. В React версии 16.0 в API была добавлена функция `hydrate`, которая выполняет гидратацию элемента^[5][6].

Вариации

Потоковый серверный рендеринг

Потоковый серверный рендеринг (англ. англ. Streaming server-side rendering) позволяет отправлять HTML по частям (chunks), которые браузер может постепенно отрисовывать по мере получения. Это может обеспечить быструю первую отрисовку (First Paint) и первую содержательную отрисовку (FCP), так как HTML-разметка доставляется пользователям быстрее^[2].

Прогрессивная гидратация

При прогрессивной гидратации (англ. англ. progressive rehydration) отдельные части отрисованного на сервере приложения «запускаются» (оживают) постепенно, в отличие от распространённого подхода, когда всё приложение инициализируется одновременно. Это помогает уменьшить объём JavaScript, необходимого для придания интерактивности страницам, поскольку «оживление» низкоприоритетных частей страницы на стороне клиента можно отложить, чтобы не блокировать основной поток. Это также помогает избежать одной из самых распространённых проблем гидратации при серверном рендеринге, когда отрисованное на сервере DOM-дерево уничтожается и немедленно перестраивается заново — чаще всего потому, что для первоначальной синхронной отрисовки на стороне клиента требовались данные, которые ещё не были готовы (например, находились в ожидании разрешения промиса)^[2].

Частичная гидратация

Реализация частичной гидратации (англ. англ. partial rehydration) оказалась сложной задачей. Этот подход является развитием идеи прогрессивной гидратации, при котором анализируются отдельные части (компоненты/представления/деревья), подлежащие постепенной гидратации, и выявляются те из них, которые имеют низкую интерактивность или не имеют реактивности. Для каждой из этих преимущественно статических частей соответствующий JavaScript-код преобразуется в инертные ссылки и декоративную функциональность, что сводит их «вес» на стороне клиента почти к нулю. Подход частичной гидратации сопряжён с собственными проблемами и компромиссами. Он создаёт интересные задачи для кэширования, а навигация на стороне клиента означает, что нельзя гарантировать доступность отрисованного на сервере HTML для инертных частей приложения без полной перезагрузки страницы^[2].

Одним из фреймворков, поддерживающих частичную гидратацию, является Elder.js, основанный на Svelte^[7].

Тризоморфный рендеринг

Тризоморфный рендеринг (англ. англ. Trisomorphic rendering) — техника, которая использует потоковый серверный рендеринг для первоначальной загрузки и навигации без JS, а затем использует сервис-воркер для рендеринга HTML при последующих переходах после его установки. Это позволяет поддерживать кэшированные компоненты и шаблоны в актуальном состоянии и обеспечивает навигацию в стиле одностраничного приложения (SPA) для отрисовки новых представлений в рамках той же сессии. Этот подход работает лучше всего, когда можно использовать один и тот же код для шаблонизации и маршрутизации на сервере, на клиентской странице и в сервис-воркере^[2].