Was ist Hydration

Hydration bezeichnet den Vorgang, bei dem die clientseitige Angular-App das serverseitig gerenderte HTML wiederverwendet und Ereignis-Listener sowie State an das vorhandene DOM bindet, anstatt es zu verwerfen und erneut zu rendern.

Älteres SSR verwendete eine destruktive Hydration: Der Client löschte das Server-DOM und renderte alles von Grund auf neu. Das führte zu einem sichtbaren Flackern und machte die Arbeit des Servers zunichte.

Modernes Angular führt eine nicht-destruktive Hydration durch: Es durchläuft das vorhandene DOM, gleicht es mit dem Komponentenbaum ab und verwendet die vorhandenen Knoten wieder. Das verhindert Flackern, reduziert den Aufwand und verbessert die Performance.

Durch die Wiederverwendung des Server-HTML bleibt der größte Inhalt gerendert, was den LCP verbessert. Außerdem werden Layoutverschiebungen durch erneutes Rendern vermieden, was dem CLS zugutekommt. Die App wird interaktiv, ohne dass sie neu gezeichnet werden muss.

Phase eins: Der Server rendert HTML und sendet es. Phase zwei: Der Browser lädt JavaScript herunter, startet Angular und hydratisiert das vorhandene Markup, sodass es interaktiv wird.

Hydration setzt voraus, dass der Komponentenbaum auf dem Client dieselbe Struktur erzeugt wie der Server. Wenn sie voneinander abweichen, meldet Angular einen Hydration-Mismatch.

Direkte DOM-Manipulation, nur im Browser ausgeführte Verzweigungen, die das Markup verändern, ungültige HTML-Verschachtelungen und nichtdeterministische Inhalte (wie Math.random() oder Date.now() in Templates) verursachen Abweichungen.

Manipulieren Sie das DOM während des SSR nicht imperativ (beispielsweise mit innerHTML außerhalb von Angular). Lassen Sie Angular die Kontrolle über das DOM behalten, damit Client und Server übereinstimmen.

Bei einer Komponente, die tatsächlich nicht hydratisiert werden kann, etwa einem Drittanbieter-Widget, das das DOM verändert, können Sie die Hydration mit ngSkipHydration deaktivieren. Angular rendert dann nur diesen Teilbaum erneut.

Hydration ist nur möglich, wenn serverseitig gerendertes HTML zur Wiederverwendung vorhanden ist. Eine reine CSR-App hat nichts zu hydratisieren; Hydration ist die Client-Seite von SSR.

Hydration kann vollständig erfolgen (die gesamte App wird beim Laden hydratisiert) oder inkrementell (Teile werden bei Bedarf hydratisiert). Die Wahl der richtigen Strategie ist entscheidend für die Performance und wird in späteren Lektionen behandelt.

Überprüfen Sie Ihr Verständnis von Hydration.

Hydration verwendet das Server-HTML auf dem Client nicht-destruktiv wieder und verbessert dadurch LCP und CLS. Inkonsistenzen entstehen durch manuelle DOM-Änderungen oder nicht deterministisches Markup. Verwenden Sie ngSkipHydration als Ausweichlösung. Hydration ist die Client-Seite von SSR.