Vue Academy · Урок

Стратегии отложенной гидратации

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — ленивая гидратация в Nuxt

Урок 4 из 413 шагов

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

Проблема стоимости гидратации

SSR отправляет готовый к отображению HTML, но клиенту всё равно нужно гидратировать каждый компонент, чтобы сделать его интерактивным. Гидратация всего интерфейса сразу блокирует главный поток и задерживает интерактивность (TTI).

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

Автоматический префикс Lazy в Nuxt

В Nuxt добавление префикса Lazy к имени компонента включает его ленивый импорт. В сочетании со стратегиями гидратации это откладывает и загрузку JS, и саму гидратацию.

<template>
  <!-- Nuxt resolves LazyMyComponent automatically -->
  <LazyMyComponent />
</template>

hydrateOnVisible

hydrateOnVisible гидратирует компонент только после того, как он прокрутится в область просмотра, используя под капотом IntersectionObserver. Это идеально подходит для разделов, расположенных ниже первого экрана.

<template>
  <!-- Nuxt syntax: hydrate when visible -->
  <LazyProductReviews hydrate-on-visible />
</template>

<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->

hydrateOnVisible с отступом

Можно передать параметры IntersectionObserver, чтобы гидратация начиналась немного до появления элемента в области просмотра и взаимодействие с ним было плавнее.

<template>
  <!-- start hydrating 100px before entering viewport -->
  <LazyComments
    :hydrate-on-visible="{ rootMargin: '100px' }"
  />
</template>

hydrateOnIdle

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

<template>
  <!-- hydrate during idle time -->
  <LazyNewsletterSignup hydrate-on-idle />

  <!-- optional max timeout in ms -->
  <LazyChatBubble :hydrate-on-idle="3000" />
</template>

hydrateOnInteraction

hydrateOnInteraction откладывает гидратацию до срабатывания указанного события DOM на элементе (нажатия, фокусировки или наведения мыши). До взаимодействия пользователя компонент остаётся статической HTML-разметкой.

<template>
  <!-- hydrate only on click -->
  <LazyDropdownMenu hydrate-on-interaction="click" />

  <!-- multiple events -->
  <LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>

hydrateOnMediaQuery

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

<template>
  <!-- only hydrate on wide screens -->
  <LazyDesktopSidebar
    hydrate-on-media-query="(min-width: 1024px)"
  />
</template>

Основные возможности Vue: помощники гидратации

За пределами Nuxt те же стратегии доступны в виде помощников гидратации, передаваемых в параметр hydrate компонента defineAsyncComponent. Префиксы Nuxt — это удобная обёртка над ними.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const LazyChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  hydrate: hydrateOnVisible()
})

Выбор подходящей стратегии

Выбирайте стратегию в соответствии с целью:

Видимость — содержимое ниже первого экрана (отзывы, нижние колонтитулы)
Простой — фоновые компоненты (аналитика, подписка на рассылку)
Взаимодействие — интерфейс, который открывается по действию пользователя (меню, модальные окна)
Медиазапрос — интерфейс для определённого устройства

Компромиссы, о которых нужно помнить

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

Объединение с островами

Отложенная гидратация сочетается с архитектурой островов: большая часть страницы представляет собой статический HTML, отрисованный на сервере, а гидратация выполняется только для интерактивных островов — лениво, в соответствии со стратегией. В результате клиентский JS сводится к минимуму, а интерактивность там, где она важна, появляется быстро.

<template>
  <StaticArticle />            <!-- never hydrates -->
  <LazyCommentBox hydrate-on-visible />
  <LazyLikeButton hydrate-on-interaction="click" />
</template>

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

Проверьте своё понимание стратегий гидратации.

Ответь в интерактивном уроке

Итоги

Вы изучили отложенную гидратацию:

Префикс Lazy в Nuxt обеспечивает ленивый импорт компонентов
hydrateOnVisible — для содержимого ниже области просмотра с помощью IntersectionObserver
hydrateOnIdle — для некритичного содержимого во время простоя
hydrateOnInteraction — запускается событием, например щелчком или фокусировкой
Ядро Vue предоставляет эти возможности как вспомогательные функции hydrate в defineAsyncComponent

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

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

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

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

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

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

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

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — ленивая гидратация в Nuxt Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

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

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

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

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

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

Компонент Vue Suspense
Асинхронные компоненты с defineAsyncComponent
Потоковый SSR с renderToWebStream
Стратегии отложенной гидратации

← Назад к Vue Academy