Гидратация в Atomico обеспечивает связывание уже отрендерённого на сервере DOM с реактивной логикой компонентов без повторного создания всех узлов. Этот механизм устраняет дублирование работы и позволяет использовать серверный рендеринг совместно с реактивной моделью состояний.
Atomico использует веб-компоненты и их жизненный цикл для подключения логики к существующей разметке. При гидратации компонент:
customElements.define.Гидратация отличается от простого клиентского рендера тем, что структура DOM уже присутствует; требуется только восстановление реактивности и событий.
Серверная сторона отвечает за создание HTML-снимка компонента. В ответе отсутствует JS-логика, но включены атрибуты и содержание слотов. Клиент при загрузке:
При отсутствии сериализации состояние инициализируется по умолчанию, что подходит для большинства статичных сценариев рендера.
Atomico разделяет атрибуты и свойства. Атрибуты проходят через HTML во время SSR и могут быть использованы для первоначальной настройки. Свойства живут на экземпляре класса и активируются после загрузки скриптов.
Атрибуты являются ключевой опорой гидратации. При совпадении имени атрибута и свойства происходит автоматическое приведение типов и восстановление значений.
Слоты рендерятся сервером в виде обычного HTML. Гидратация не изменяет их содержимое. Реактивность реализуется при обновлении состояний: слот может быть перерендерён только если изменён сам компонент или его дочерние узлы.
Atomico избегает перезаписи HTML внутри слотов при начальной инициализации, что делает гидратацию безопасной для вложенных компонентов и пользовательского контента.
Во время гидратации восстанавливаются:
useEffect.Эффекты выполняются один раз после связывания экземпляра компонента с DOM. Если эффект зависит от реактивного значения, последующие обновления происходят только при его изменении.
Состояния, созданные через хуки Atomico, получают начальные значения при определении компонента. При гидратации состояние может быть переопределено атрибутами или внешними данными.
Для сложных приложений возможно сохранение состояния между сервером и клиентом через сериализацию. Atomico допускает использование глобального контейнера (например, JSON-данных, встроенных в страницу), который считывается при загрузке скриптов.
Несмотря на эффективность, существуют ограничения:
При несоответствии HTML и предполагаемой структуры компонента происходит корректирующий рендер, удаляющий расхождения.
Atomico использует стратегию минимального обновления DOM. При гидратации сравниваются виртуальные описания узлов и фактические узлы. Если структура совпадает:
Только при несовместимости участков структуры происходит частичный рендер. Эта стратегия снижает потребление ресурсов и сокращает время до интерактивности.
Гидратация распространяется транзитивно. Если компонент содержит дочерние компоненты Atomico, сервер генерирует HTML для всех уровней. Клиентская сторона при регистрации каждого кастомного элемента восстанавливает логику дерева целиком, не нарушая уже существующий DOM.
Композиция особенно важна для UI-фреймворков, использующих вкладку маршрутизации или ленивую загрузку. Компоненты, загруженные позднее, могут гидратироваться отдельно, без пересоздания остального дерева.
При использовании асинхронных источников данных возможны два режима:
Atomico корректно обновляет DOM после завершения асинхронных операций. Гидратация не мешает этому процессу, если HTML не противоречит ожидаемой структуре.
Несовместимость структуры часто проявляется в виде:
Для диагностики используется сравнение SSR-вывода и клиентского состояния. Atomico предоставляет низкоуровневые точки расширения, позволяющие наблюдать жизненный цикл и сравнивать узлы.
Гидратация улучшает перформанс интерфейсов, в которых требуется:
Atomico сочетает веб-компоненты с реактивной моделью, что делает гидратацию естественной частью экосистемы, без необходимости внедрения сторонних протоколов согласования между сервером и клиентом.