Angular Academy · Урок

Включение полной гидратации

Включайте гидратацию, чтобы избежать повторного отображения

«Включение полной гидратации» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Включение гидратации

Полная гидратация включается добавлением provideClientHydration() в провайдеры приложения. Схема ng add @angular/ssr добавляет её автоматически.

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Где это указывается

Она указывается среди провайдеров браузерного appConfig — той же конфигурации, которая используется для запуска клиента. Конфигурация сервера дополняет её с помощью provideServerRendering().

Что означает «полная»

Полная (нетерпеливая) гидратация гидратирует всё дерево компонентов сразу после загрузки JavaScript и запуска Angular. Каждый компонент сразу становится интерактивным.

Повтор воспроизведения событий

Включите withEventReplay(), чтобы взаимодействия пользователя, произошедшие до завершения гидратации, сохранялись и воспроизводились после неё. Это предотвращает потерю нажатий на медленных устройствах.

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

providers: [provideClientHydration(withEventReplay())]

Кэш переноса HTTP

При включённой гидратации ответы HttpClient на запросы GET с сервера по умолчанию кэшируются в TransferState, поэтому клиенту не приходится повторно запрашивать те же данные после запуска.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

Проверка гидратации

Откройте консоль в режиме разработки. Angular выводит статистику гидратации (количество гидратированных компонентов и повторно использованных узлов). Если предупреждения о несоответствиях отсутствуют, гидратация успешно завершилась.

// Angular hydrated 24 component(s) and 187 node(s)

Исправление несоответствий

Если Вы видите ошибки несоответствия NG0500, найдите недетерминированные шаблоны или ручные изменения DOM. Сделайте разметку детерминированной, чтобы результаты на сервере и клиенте совпадали.

Защита браузерных API

Код, обращающийся к window или localStorage во время первоначальной отрисовки, может изменить разметку на сервере и клиенте. Используйте isPlatformBrowser для проверки или запускайте такой код после инициализации представления.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

Компромиссы полной гидратации

Полная гидратация проста, но заранее загружает и выполняет JavaScript всех компонентов. В больших приложениях это может отложить появление интерактивности; проблему решает инкрементальная гидратация.

i18n и гидратация

Гидратация работает с Angular i18n, но переведённое содержимое должно быть детерминированным. Разные локали на сервере и клиенте приводят к ошибкам гидратации.

Проверка перед выпуском

Перед выпуском соберите приложение для production, запустите результат SSR и убедитесь в сетевых запросах и консоли, что гидратация выполняется без несоответствий, а кэш переноса предотвращает повторные запросы.

Быстрая проверка

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

Итоги

Вы включили полную гидратацию с помощью provideClientHydration(), добавили withEventReplay() для нажатий до гидратации, использовали кэш переноса HTTP, защитили браузерные API и проверили успешную гидратацию. Полная гидратация проста, но заранее загружает весь JS.

Часто задаваемые вопросы

Урок «Включение полной гидратации» бесплатный?

Да — полный текст урока «Включение полной гидратации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Включение полной гидратации»?

Включайте гидратацию, чтобы избежать повторного отображения Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Включение полной гидратации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy