Angular Academy · Lektion

Vollständige Hydration aktivieren

Hydration aktivieren, um erneutes Rendern zu vermeiden

Vollständige Hydration aktivieren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Hydration aktivieren

Die vollständige Hydration wird aktiviert, indem Sie provideClientHydration() zu den Providern Ihrer Anwendung hinzufügen. Das Schema ng add @angular/ssr fügt es automatisch hinzu.

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

export const appConfig = {
  providers: [provideClientHydration()]
};

Wo es hingehört

Es gehört zu den Providern der Browser-appConfig, also zu derselben Konfiguration, mit der der Client gestartet wird. Die Serverkonfiguration wird mit provideServerRendering() darübergelegt.

Was vollständig bedeutet

Bei der vollständigen (eager) Hydration wird der gesamte Komponentenbaum hydratisiert, sobald das JavaScript geladen und Angular gestartet wurde. Jede Komponente wird sofort interaktiv.

Event-Replay

Aktivieren Sie withEventReplay(), damit Benutzerinteraktionen, die vor Abschluss der Hydration stattfinden, aufgezeichnet und anschließend wiedergegeben werden. So gehen Klicks auf langsamen Geräten nicht verloren.

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

providers: [provideClientHydration(withEventReplay())]

HTTP-Transfer-Cache

Bei aktivierter Hydration werden GET-Antworten von HttpClient standardmäßig in TransferState zwischengespeichert, sodass der Client dieselben Daten nach dem Start nicht erneut abruft.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

Hydration überprüfen

Öffnen Sie im Entwicklungsmodus die Konsole. Angular protokolliert Hydration-Statistiken (hydratisierte Komponenten, wiederverwendete Knoten). Wenn keine Warnungen zu Inkonsistenzen angezeigt werden, war die Hydration erfolgreich.

// Angular hydrated 24 component(s) and 187 node(s)

Inkonsistenzen beheben

Wenn Sie NG0500-Fehler aufgrund von Inkonsistenzen sehen, suchen Sie nach nicht deterministischen Templates oder manuellen DOM-Änderungen. Sorgen Sie für deterministisches Markup, damit die Ausgaben von Server und Client übereinstimmen.

Browser-APIs absichern

Code, der während des initialen Renderings auf window oder localStorage zugreift, kann das Markup zwischen Server und Client verändern. Sichern Sie ihn mit isPlatformBrowser ab oder führen Sie ihn erst nach der View-Initialisierung aus.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

Abwägung bei vollständiger Hydration

Vollständige Hydration ist einfach, lädt jedoch das JavaScript aller Komponenten im Voraus herunter und führt es aus. Bei großen Apps kann dies die Interaktivität verzögern. Genau hier setzt inkrementelle Hydration an.

i18n und Hydration

Hydration funktioniert mit Angular-i18n. Stellen Sie jedoch sicher, dass übersetzte Inhalte deterministisch sind. Nicht übereinstimmende Locales zwischen Server und Client führen zu Hydration-Fehlern.

Produktionsprüfung

Erstellen Sie vor der Veröffentlichung einen Produktions-Build, stellen Sie die SSR-Ausgabe bereit und prüfen Sie im Netzwerk-Tab sowie in der Konsole, dass Hydration ohne Inkonsistenzen ausgeführt wird und der Transfer-Cache doppelte Abrufe verhindert.

Kurzer Check

Überprüfen Sie Ihr Wissen zur vollständigen Hydration.

Zusammenfassung

Sie haben die vollständige Hydration mit provideClientHydration() aktiviert, mit withEventReplay() Klicks vor der Hydration erfasst, den HTTP-Transfer-Cache genutzt, Browser-APIs abgesichert und eine fehlerfreie Hydration überprüft. Vollständige Hydration ist einfach, lädt jedoch sämtliches JavaScript im Voraus.

Häufig gestellte Fragen

Ist die Lektion „Vollständige Hydration aktivieren“ kostenlos?

Ja — der vollständige Text von „Vollständige Hydration aktivieren“ 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 „Vollständige Hydration aktivieren“?

Hydration aktivieren, um erneutes Rendern zu vermeiden 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 2 von 4.

Wie lange dauert die Lektion „Vollständige Hydration aktivieren“?

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