Strategier för uppskjuten hydrering
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() – lazy hydration i Nuxt.
Strategier för uppskjuten hydrering är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Problemet med kostnaden för hydrering
SSR skickar färdig HTML som kan visas direkt, men klienten måste fortfarande hydrera varje komponent för att göra den interaktiv. Om allt hydreras direkt blockeras huvudtråden och interaktiviteten fördröjs (TTI).
Uppskjuten (lazy) hydrering fördröjer hydreringen av komponenter tills de faktiskt behövs.
Nuxts automatiska Lazy-prefix
I Nuxt gör prefixet Lazy framför en komponent att den importeras lazy. Tillsammans med hydreringstrategier skjuter detta upp både JavaScript-hämtningen och hydreringen.
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>hydrateOnVisible
hydrateOnVisible hydreras en komponent först när den kommer in i visningsområdet, med hjälp av IntersectionObserver i bakgrunden. Perfekt för innehåll längre ned på sidan.
<template>
<!-- Nuxt syntax: hydrate when visible -->
<LazyProductReviews hydrate-on-visible />
</template>
<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->hydrateOnVisible med marginal
Ni kan skicka med alternativ för IntersectionObserver så att hydreringen börjar något innan elementet blir synligt, vilket ger en mjukare upplevelse.
<template>
<!-- start hydrating 100px before entering viewport -->
<LazyComments
:hydrate-on-visible="{ rootMargin: '100px' }"
/>
</template>hydrateOnIdle
hydrateOnIdle väntar tills webbläsaren är inaktiv (via requestIdleCallback) innan hydreringen utförs. Använd det för icke-kritiska widgetar som inte bör konkurrera med den initiala interaktiviteten.
<template>
<!-- hydrate during idle time -->
<LazyNewsletterSignup hydrate-on-idle />
<!-- optional max timeout in ms -->
<LazyChatBubble :hydrate-on-idle="3000" />
</template>hydrateOnInteraction
hydrateOnInteraction skjuter upp hydreringen tills en angiven DOM-händelse utlöses på elementet (click, focus, mouseover). Komponenten förblir statisk HTML tills användaren interagerar med den.
<template>
<!-- hydrate only on click -->
<LazyDropdownMenu hydrate-on-interaction="click" />
<!-- multiple events -->
<LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>hydrateOnMediaQuery
hydrateOnMediaQuery hydreras bara när en media query matchar — till exempel kan en sidopanel som endast används på datorer hydreras när den visas, medan onödigt arbete på små skärmar undviks.
<template>
<!-- only hydrate on wide screens -->
<LazyDesktopSidebar
hydrate-on-media-query="(min-width: 1024px)"
/>
</template>Vues kärn-API: hjälpfunktioner för hydrering
Utanför Nuxt finns samma strategier som hjälpfunktioner för hydrering som skickas till alternativet hydrate i defineAsyncComponent. Nuxt-prefixen är syntaktiskt socker ovanpå dessa.
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const LazyChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
hydrate: hydrateOnVisible()
})Välja rätt strategi
Välj strategi efter avsikt:
- Synlighet — innehåll längre ned på sidan (recensioner, sidfötter)
- Inaktivitet — widgetar i bakgrunden (analys, nyhetsbrev)
- Interaktion — gränssnitt som visas efter en användaråtgärd (menyer, modala fönster)
- Media query — enhetsspecifikt gränssnitt
Avvägningar att tänka på
Uppskjuten hydrering förbättrar TTI, men innebär att komponenten är inte interaktiv tills dess utlösare aktiveras. Vid interaktionsbaserade strategier används det allra första klicket för att utlösa hydreringen, vilket kan upplevas som något fördröjt. Använd omedelbar hydrering för det viktigaste gränssnittet med primära uppmaningar till åtgärd.
Kombinera med islands
Fördröjd hydrering passar ihop med islands-arkitekturen: större delen av sidan består av statiskt serverrenderad HTML, och endast interaktiva öar hydreras — dessutom lazy enligt strategi. Resultatet blir minimalt med JavaScript på klienten och snabb interaktivitet där den behövs.
<template>
<StaticArticle /> <!-- never hydrates -->
<LazyCommentBox hydrate-on-visible />
<LazyLikeButton hydrate-on-interaction="click" />
</template>Snabbtest
Testa era kunskaper om hydreringsstrategier.
Sammanfattning
Ni lärde er om fördröjd hydrering:
- Nuxts
Lazy-prefix importerar komponenter lazy - hydrateOnVisible — komponenter under den synliga delen av sidan via IntersectionObserver
- hydrateOnIdle — icke-kritiska komponenter under webbläsarens lediga tid
- hydrateOnInteraction — utlöses av händelser, till exempel klick eller fokus
- Core Vue exponerar dessa som
hydrate-hjälpfunktioner pådefineAsyncComponent
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Strategier för uppskjuten hydrering” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Strategier för uppskjuten hydrering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Strategier för uppskjuten hydrering”?
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() – lazy hydration i Nuxt. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Strategier för uppskjuten hydrering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vue-komponenten Suspense
- Asynkrona komponenter med defineAsyncComponent
- Strömmande SSR med renderToWebStream
- Strategier för uppskjuten hydrering