Angular Academy · Lektion

Inkrementelle Hydration mit @defer

Teile der Seite nach Bedarf hydratisieren

Inkrementelle Hydration mit @defer ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Kosten vollständiger Hydration

Vollständige Hydration startet jede Komponente im Voraus. Inkrementelle Hydration hydratisiert stattdessen Teile der Seite bei Bedarf und verschiebt das Laden des JavaScripts für einzelne Bereiche, bis es benötigt wird.

Aufgebaut auf defer

Inkrementelle Hydration verwendet den @defer-Block mit den speziellen hydrate-Triggern. Der Server rendert den Inhalt weiterhin, aber der Client hydratisiert ihn erst, wenn ein Trigger ausgelöst wird.

@defer (hydrate on viewport) {
  <app-comments />
}

Aktivieren

Aktivieren Sie die Funktion mit withIncrementalHydration() im Hydration-Provider. Dadurch werden die hydrate-Trigger in Templates verfügbar.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

providers: [provideClientHydration(withIncrementalHydration())]

hydrate on viewport

Der häufigste Trigger hydratisiert einen Block, sobald er in den sichtbaren Bereich scrollt. Inhalte unterhalb des sichtbaren Bereichs bleiben inaktiv, wodurch JavaScript-Aufwand eingespart wird, bis Sie sie erreichen.

@defer (hydrate on viewport) {
  <app-related-products />
}

hydrate on interaction

Hydratisieren Sie den Block, sobald Sie mit ihm interagieren (click, keydown). Das eignet sich ideal für sichtbare, aber selten verwendete Widgets wie ein ausklappbares Panel.

@defer (hydrate on interaction) {
  <app-share-menu />
}

hydrate on idle und timer

Verwenden Sie hydrate on idle, um zu hydratisieren, wenn der Browser frei ist, oder hydrate on timer(2s), um nach einer Verzögerung zu hydratisieren. Das eignet sich für nicht kritische Bereiche.

@defer (hydrate on idle) {
  <app-newsletter />
}

hydrate never

hydrate never hält das serverseitig gerenderte HTML statisch: Es wird angezeigt, aber für diesen Block wird niemals JavaScript ausgeliefert. Das ist ideal für rein darstellende, nicht interaktive Inhalte.

@defer (hydrate never) {
  <app-footer-links />
}

Unterschied zu einfachem defer

Ein normales @defer in einem CSR-Kontext zeigt bis zum Laden einen Platzhalter an. Bei inkrementeller Hydration ist der Inhalt bereits serverseitig gerendert und sichtbar. Der Trigger steuert nur, wann die Interaktivität (Hydration) beginnt.

Trigger kombinieren

Sie können Trigger kombinieren, sodass ein Block hydratisiert wird, sobald das erste Ereignis eintritt. So lassen sich Bereitschaft und Ressourceneinsparung ausgewogen miteinander verbinden.

@defer (hydrate on viewport; hydrate on interaction) {
  <app-map />
}

Weniger initiales JavaScript

Wenn die Hydration umfangreicher oder unterhalb des sichtbaren Bereichs liegender Komponenten aufgeschoben wird, sinkt die anfänglich für die Interaktivität benötigte JavaScript-Menge. Dadurch verbessern sich Time-to-Interactive und INP auf dem kritischen Pfad.

Trigger mit Bedacht auswählen

Hydratisieren Sie interaktive Elemente im sichtbaren Bereich eager oder im Leerlauf. Verschieben Sie die Hydration von Elementen unterhalb des sichtbaren Bereichs und selten verwendeten Widgets auf viewport oder interaction. Messen Sie die Ergebnisse, um die Verbesserungen zu bestätigen.

Kurzer Check

Überprüfen Sie Ihr Wissen zur inkrementellen Hydration.

Zusammenfassung

Sie haben @defer (hydrate ...) mit withIncrementalHydration() verwendet, um bei viewport, interaction, idle, timer oder nie zu hydratisieren. Dadurch wird das initiale JavaScript reduziert und die Interaktivität verbessert, weil die Hydration von Blöcken unterhalb des sichtbaren Bereichs und selten verwendeten Blöcken aufgeschoben wird.

Häufig gestellte Fragen

Ist die Lektion „Inkrementelle Hydration mit @defer“ kostenlos?

Ja — der vollständige Text von „Inkrementelle Hydration mit @defer“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Inkrementelle Hydration mit @defer“?

Teile der Seite nach Bedarf hydratisieren Du übst Angular 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 Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular 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 3 von 4.

Wie lange dauert die Lektion „Inkrementelle Hydration mit @defer“?

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 Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular 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

← Zurück zu Angular Academy