Strategien für verzögerte Hydration
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() – Lazy Hydration in Nuxt
Strategien für verzögerte Hydration ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem der Hydration-Kosten
SSR sendet bereits anzeigbares HTML, aber der Client muss weiterhin jede Komponente hydratisieren, damit sie interaktiv wird. Wenn alles sofort hydratisiert wird, blockiert das den Hauptthread und verzögert die Interaktivität (TTI).
Bei der verzögerten (lazy) Hydration wird die Hydration von Komponenten aufgeschoben, bis sie tatsächlich benötigt werden.
Nuxt-Präfix für automatisches Lazy Loading
In Nuxt sorgt das Präfix Lazy vor einem Komponentennamen dafür, dass die Komponente verzögert importiert wird. Zusammen mit Hydration-Strategien werden sowohl der Download des JavaScript-Codes als auch die Hydration aufgeschoben.
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>hydrateOnVisible
hydrateOnVisible hydratisiert eine Komponente erst, wenn sie in den Viewport scrollt, und verwendet dafür im Hintergrund einen IntersectionObserver. Das ist ideal für Bereiche unterhalb des sichtbaren Bereichs.
<template>
<!-- Nuxt syntax: hydrate when visible -->
<LazyProductReviews hydrate-on-visible />
</template>
<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->hydrateOnVisible mit Abstand
Sie können Optionen für den IntersectionObserver übergeben, sodass die Hydration etwas vor der Sichtbarkeit des Elements beginnt und die Benutzererfahrung flüssiger wirkt.
<template>
<!-- start hydrating 100px before entering viewport -->
<LazyComments
:hydrate-on-visible="{ rootMargin: '100px' }"
/>
</template>hydrateOnIdle
hydrateOnIdle wartet mit der Hydration, bis der Browser untätig ist (über requestIdleCallback). Verwenden Sie es für nicht kritische Widgets, die nicht mit der anfänglichen Interaktivität konkurrieren sollen.
<template>
<!-- hydrate during idle time -->
<LazyNewsletterSignup hydrate-on-idle />
<!-- optional max timeout in ms -->
<LazyChatBubble :hydrate-on-idle="3000" />
</template>hydrateOnInteraction
hydrateOnInteraction verschiebt die Hydration, bis ein festgelegtes DOM-Ereignis am Element ausgelöst wird (Klick, Fokus, mouseover). Die Komponente bleibt statisches HTML, bis der Benutzer mit ihr interagiert.
<template>
<!-- hydrate only on click -->
<LazyDropdownMenu hydrate-on-interaction="click" />
<!-- multiple events -->
<LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>hydrateOnMediaQuery
hydrateOnMediaQuery hydratisiert nur, wenn eine Media Query zutrifft — beispielsweise eine nur auf Desktop-Geräten angezeigte Seitenleiste, die auf Mobilgeräten ausgeblendet ist. So vermeiden Sie unnötige Arbeit auf kleinen Bildschirmen.
<template>
<!-- only hydrate on wide screens -->
<LazyDesktopSidebar
hydrate-on-media-query="(min-width: 1024px)"
/>
</template>Vue-Kern-API: Hydration-Hilfsfunktionen
Außerhalb von Nuxt gibt es dieselben Strategien als Hydration-Hilfsfunktionen, die an die Option hydrate von defineAsyncComponent übergeben werden. Die Nuxt-Präfixe sind lediglich eine vereinfachte Schreibweise dafür.
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const LazyChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
hydrate: hydrateOnVisible()
})Die richtige Strategie auswählen
Richten Sie die Strategie am jeweiligen Zweck aus:
- Visible — Inhalte unterhalb des sichtbaren Bereichs (Bewertungen, Fußzeilen)
- Idle — Hintergrund-Widgets (Analytics, Newsletter)
- Interaction — durch Benutzeraktionen eingeblendete UI (Menüs, Modals)
- Media query — gerätespezifische UI
Zu beachtende Kompromisse
Verzögerte Hydration verbessert die TTI, bedeutet aber, dass die Komponente nicht interaktiv ist, bis ihr Auslöser aktiviert wird. Bei interaktionsbasierten Strategien wird der allererste Klick zum Auslösen der Hydration verwendet und kann sich dadurch leicht verzögert anfühlen. Verwenden Sie für zentrale Call-to-Action-UI eine sofortige Hydration.
Kombination mit Islands
Deferred Hydration ergänzt die Islands-Architektur: Der größte Teil der Seite besteht aus statischem, serverseitig gerendertem HTML, und nur interaktive Islands werden per Strategie verzögert hydratisiert. Das Ergebnis ist minimales Client-JavaScript und schnelle Interaktivität dort, wo sie wichtig ist.
<template>
<StaticArticle /> <!-- never hydrates -->
<LazyCommentBox hydrate-on-visible />
<LazyLikeButton hydrate-on-interaction="click" />
</template>Kurzer Test
Testen Sie Ihr Verständnis der Hydrationsstrategien.
Zusammenfassung
Sie haben Deferred Hydration kennengelernt:
- Das Präfix
Lazyvon Nuxt importiert Komponenten verzögert - hydrateOnVisible — für Inhalte unterhalb des sichtbaren Bereichs über IntersectionObserver
- hydrateOnIdle — für nicht kritische Inhalte während Leerlaufzeiten
- hydrateOnInteraction — durch Ereignisse ausgelöst (Klick/Fokus)
- Das Vue-Kernsystem stellt diese Funktionen als
hydrate-Hilfsfunktionen vondefineAsyncComponentbereit
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Strategien für verzögerte Hydration“ kostenlos?
Ja — der vollständige Text von „Strategien für verzögerte Hydration“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Strategien für verzögerte Hydration“?
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() – Lazy Hydration in Nuxt Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Strategien für verzögerte Hydration“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Vue-Suspense-Komponente
- Asynchrone Komponenten mit defineAsyncComponent
- Streaming-SSR mit renderToWebStream
- Strategien für verzögerte Hydration