Angular Academy · Урок

Инкрементальная гидратация с @defer

Гидратируйте части страницы по требованию

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

Цена полной гидратации

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

Основа — defer

Инкрементальная гидратация использует блок @defer со специальными триггерами hydrate. Сервер по-прежнему отрисовывает содержимое, но клиент гидратирует его только после срабатывания триггера.

@defer (hydrate on viewport) {
  <app-comments />
}

Включение

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

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

providers: [provideClientHydration(withIncrementalHydration())]

гидратация при появлении в области просмотра

Самый распространённый триггер гидратирует блок, когда тот появляется в области просмотра. Содержимое ниже первой области просмотра остаётся неактивным, что экономит ресурсы JavaScript, пока пользователь до него не дойдёт.

@defer (hydrate on viewport) {
  <app-related-products />
}

гидратация при взаимодействии

Гидратируйте блок, когда пользователь взаимодействует с ним (например, выполняет click или keydown). Это особенно удобно для виджетов, которые видны, но используются редко, например раскрывающейся панели.

@defer (hydrate on interaction) {
  <app-share-menu />
}

гидратация в простой и по таймеру

Используйте hydrate on idle, чтобы гидратировать блок, когда браузер свободен, или hydrate on timer(2s), чтобы гидратировать его после задержки. Это подходит для второстепенных областей.

@defer (hydrate on idle) {
  <app-newsletter />
}

никогда не гидратировать

hydrate never оставляет отрисованный сервером HTML статичным: он отображается, но JavaScript для этого блока никогда не загружается. Это идеальный вариант для полностью презентационного неинтерактивного содержимого.

@defer (hydrate never) {
  <app-footer-links />
}

Отличие от обычного defer

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

Объединение триггеров

Триггеры можно объединять, чтобы блок гидратировался при наступлении первого из событий. Так Вы одновременно обеспечиваете готовность и экономите ресурсы.

@defer (hydrate on viewport; hydrate on interaction) {
  <app-map />
}

Меньший объём начального JS

Откладывая гидратацию тяжёлых компонентов и компонентов ниже первой области просмотра, Вы уменьшаете объём начального JavaScript, необходимого для интерактивности, и улучшаете время до интерактивности и INP на критическом пути.

Разумный выбор триггеров

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

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

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

Итоги

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

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

Урок «Инкрементальная гидратация с @defer» бесплатный?

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

Чему я научусь в уроке «Инкрементальная гидратация с @defer»?

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

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

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

Сколько времени занимает урок «Инкрементальная гидратация с @defer»?

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

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

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

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

← Назад к Angular Academy