Vue Academy · Lekcja

Strategie odroczonej hydratacji

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — leniwa hydratacja w Nuxt.

Lekcja 4 z 413 kroki

Strategie odroczonej hydratacji to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Problem kosztu hydratacji

SSR wysyła gotowy do wyświetlenia HTML, ale klient nadal musi zhydratować każdy komponent, aby nadać mu interaktywność. Hydratacja wszystkiego z góry blokuje główny wątek i opóźnia interaktywność (TTI).

Odroczona (leniwa) hydratacja opóźnia hydratację komponentów do momentu, gdy rzeczywiście będą potrzebne.

Prefiks Auto-Lazy w Nuxt

W Nuxt dodanie prefiksu Lazy do nazwy komponentu powoduje jego leniwy import. W połączeniu ze strategiami hydratacji odracza to zarówno pobranie JavaScriptu, jak i samą hydratację.

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

hydrateOnVisible

hydrateOnVisible hydrat ować komponent dopiero, gdy pojawi się on w obszarze widocznym w oknie, korzystając wewnętrznie z IntersectionObserver. Idealne rozwiązanie dla sekcji poniżej linii załamania.

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

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

hydrateOnVisible z marginesem

Można przekazać opcje IntersectionObserver, aby hydratacja rozpoczynała się nieco przed pojawieniem się elementu w widocznym obszarze, co zapewnia płynniejsze działanie.

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

hydrateOnIdle

hydrateOnIdle czeka, aż przeglądarka będzie bezczynna (za pośrednictwem requestIdleCallback), zanim rozpocznie hydratację. Należy używać go w przypadku niekrytycznych widgetów, które nie powinny konkurować z początkową interaktywnością.

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

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

hydrateOnInteraction

hydrateOnInteraction odracza hydratację do momentu wystąpienia określonego zdarzenia DOM na elemencie (click, focus, mouseover). Komponent pozostaje statycznym HTML-em do czasu interakcji użytkownika.

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

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

hydrateOnMediaQuery

hydrateOnMediaQuery hydrat uje komponent tylko wtedy, gdy zapytanie media query pasuje — na przykład hydrat ując pasek boczny przeznaczony wyłącznie dla desktopu, który jest ukryty na urządzeniach mobilnych, można uniknąć niepotrzebnej pracy na małych ekranach.

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

Podstawowe API Vue: helpery hydrate

Poza Nuxtem te same strategie są dostępne jako helpery hydratacji przekazywane do opcji hydrate komponentu defineAsyncComponent. Prefiksy Nuxt są skrótową składnią dla tych mechanizmów.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

Wybór właściwej strategii

Strategię należy dopasować do celu:

Visible — treści poniżej linii załamania (opinie, stopki)
Idle — widgety działające w tle (analityka, newsletter)
Interaction — interfejs ujawniany po działaniu użytkownika (menu, modale)
Media query — interfejs zależny od urządzenia

Kompromisy, o których należy pamiętać

Odroczona hydratacja poprawia TTI, ale oznacza, że komponent jest nieinteraktywny do czasu zadziałania wyzwalacza. W przypadku strategii opartych na interakcji pierwsze kliknięcie służy do uruchomienia hydratacji i może sprawiać wrażenie lekko opóźnionego. Dla podstawowych elementów wezwania do działania należy zachować eager hydration.

Łączenie z wyspami

Odroczona hydratacja współgra z architekturą wysp: większość strony to statyczny HTML renderowany po stronie serwera, a hydratacji — leniwie, zgodnie ze strategią — podlegają tylko interaktywne wyspy. Rezultatem jest minimalna ilość JS po stronie klienta i szybka interaktywność tam, gdzie ma znaczenie.

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

Szybkie sprawdzenie

Proszę sprawdzić zrozumienie strategii hydratacji.

Odpowiedz w interaktywnej lekcji

Podsumowanie

W tej lekcji poznali Państwo odroczoną hydratację:

Prefiks Lazy w Nuxt leniwie importuje komponenty
hydrateOnVisible — elementy poniżej pierwszego ekranu za pomocą IntersectionObserver
hydrateOnIdle — elementy niekrytyczne w czasie bezczynności
hydrateOnInteraction — uruchamiana zdarzeniem (click/focus)
Rdzeń Vue udostępnia je jako pomocnicze funkcje hydrate w defineAsyncComponent

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Strategie odroczonej hydratacji” jest bezpłatna?

Tak — pełny tekst „Strategie odroczonej hydratacji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Strategie odroczonej hydratacji”?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — leniwa hydratacja w Nuxt. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Strategie odroczonej hydratacji”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Komponent Vue Suspense
Komponenty asynchroniczne z defineAsyncComponent
Strumieniowanie SSR z renderToWebStream
Strategie odroczonej hydratacji

← Powrót do Vue Academy