Vue Academy · leksjon

Strategier for utsatt hydrering

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() – lazy hydration i Nuxt.

Leksjon 4 av 413 trinn

Strategier for utsatt hydrering er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Problemet med kostnaden ved hydrering

SSR sender HTML som er klar til visning, men klienten må fortsatt hydrere hver komponent for å gjøre den interaktiv. Hydrering av alt på forhånd blokkerer hovedtråden og forsinker interaktiviteten (TTI).

Utsatt (behovsstyrt) hydrering utsetter hydreringen av komponenter til det faktisk er behov for dem.

Nuxt-prefikset Lazy

I Nuxt gjør prefikset Lazy foran en komponent at den importeres behovsstyrt. Kombinert med hydreringstrategier utsetter dette både nedlastingen av JavaScript og selve hydreringen.

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

hydrateOnVisible

hydrateOnVisible hydreres en komponent først når den rulles inn i visningsområdet, ved hjelp av IntersectionObserver under panseret. Perfekt for seksjoner nedenfor det som vises først.

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

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

hydrateOnVisible med marg

De kan sende inn alternativer for IntersectionObserver slik at hydreringen starter litt før elementet blir synlig, noe som gir en jevnere opplevelse.

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

hydrateOnIdle

hydrateOnIdle venter til nettleseren er inaktiv (via requestIdleCallback) før hydrering. Bruk den for ikke-kritiske widgeter som ikke bør konkurrere med den innledende interaktiviteten.

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

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

hydrateOnInteraction

hydrateOnInteraction utsetter hydreringen til en angitt DOM-hendelse utløses på elementet (klikk, fokus, mouseover). Komponenten forblir statisk HTML til brukeren tar den i bruk.

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

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

hydrateOnMediaQuery

hydrateOnMediaQuery hydreres bare når en mediespørring samsvarer — for eksempel ved å hydrere en sidestolpe som bare brukes på datamaskiner, men er skjult på mobil, slik at unødvendig arbeid unngås på små skjermer.

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

Vues kjerne-API: hydrate-hjelpere

Utenfor Nuxt finnes de samme strategiene som hydreringhjelpere som sendes til hydrate-alternativet i defineAsyncComponent. Nuxt-prefiksene er en forenklet variant av disse.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

Velge riktig strategi

Tilpass strategien til formålet:

Synlig — innhold nedenfor det som vises først (anmeldelser, bunntekster)
Inaktiv — bakgrunnswidgeter (analyse, nyhetsbrev)
Interaksjon — grensesnitt som vises etter en brukerhandling (menyer, modale dialoger)
Mediespørring — enhetsspesifikt grensesnitt

Viktige avveininger

Utsatt hydrering forbedrer TTI, men betyr at komponenten ikke er interaktiv før utløsende hendelse finner sted. For interaksjonsbaserte strategier brukes det aller første klikket til å utløse hydreringen, og det kan derfor oppleves som litt forsinket. Bruk umiddelbar hydrering for sentrale handlingsoppfordringer.

Kombinering med islands

Utsatt hydrering kombineres med islands-arkitekturen: Det meste av siden er statisk server-rendert HTML, og bare interaktive islands hydreres – forsinket og etter strategi. Resultatet er minimalt med JavaScript på klienten og rask interaktivitet der det er viktig.

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

Hurtigsjekk

Test forståelsen Deres av hydreringstrategier.

Besvar den i den interaktive leksjonen

Oppsummering

De lærte om utsatt hydrering:

Nuxts Lazy-prefiks importerer komponenter forsinket
hydrateOnVisible — innhold under folden via IntersectionObserver
hydrateOnIdle — ikke-kritisk innhold i ledig tid
hydrateOnInteraction — utløses av hendelser (klikk/fokus)
Vue-kjernen eksponerer disse som hydrate-hjelpere på defineAsyncComponent

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Strategier for utsatt hydrering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Strategier for utsatt hydrering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Strategier for utsatt hydrering»?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() – lazy hydration i Nuxt. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Strategier for utsatt hydrering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Vue Suspense-komponenten
Asynkrone komponenter med defineAsyncComponent
Streaming-SSR med renderToWebStream
Strategier for utsatt hydrering

← Tilbake til Vue Academy