Progressive Hydrierung mit selektiver Hydrierung

Selektive Hydration ist eine Funktion von React 18, mit der React mit der Hydration von Komponenten beginnen kann, sobald deren JavaScript-Code eintrifft, ohne auf den Download des JavaScripts für die gesamte Seite zu warten. Jeder unabhängig durch Code-Splitting aufgeteilte Abschnitt wird hydriert, sobald sein Bundle geladen ist, und nicht alle Abschnitte gleichzeitig.

Vor React 18 war die Hydration nach dem Prinzip „alles oder nichts“ aufgebaut — React musste das gesamte JavaScript herunterladen und den ganzen Baum hydrieren, bevor irgendein Teil der Seite interaktiv wurde. React 18 hebt diese Einschränkung auf: Teile des Baums werden unabhängig voneinander hydriert, sobald ihr Code und ihre Daten verfügbar sind.

Wenn der Benutzer auf eine Suspense-Boundary klickt oder mit ihr interagiert, die noch nicht hydriert wurde, priorisiert React sofort die Hydration dieses Teilbaums vor allen anderen ausstehenden Hydration-Aufgaben. Dadurch wird das Element, das der Benutzer verwenden möchte, zuerst interaktiv — auch wenn es nicht an erster Stelle im Dokument steht.

Die Kombination aus React.lazy, dynamischen Imports und Suspense-Boundaries ermöglicht selektive Hydration für durch Code-Splitting aufgeteilte Komponenten. Der Browser lädt zuerst das zentrale JS-Bundle und hydriert die Shell sofort. Jede verzögert geladene Komponente wird hydriert, sobald ihr Chunk heruntergeladen wurde — schrittweise, während der Browser die Chunks abruft.

Das Ergebnis: Inhalte im sichtbaren Bereich werden interaktiv, bevor das JavaScript für die darunterliegenden Bereiche überhaupt heruntergeladen wurde. Benutzer können mit der Navigation und dem Hero-CTA interagieren, während der Kommentar-Feed und das Empfehlungs-Widget noch ihre JavaScript-Chunks laden.

Selektive Hydration reduziert die Total Blocking Time (TBT) — die wichtigste Kennzahl für die Hydration-Performance. Im Performance-Tab von Chrome DevTools werden Long Tasks (Aufgaben mit einer Dauer von mehr als 50 ms) rot hervorgehoben. Vor der selektiven Hydration sehen Sie möglicherweise eine einzelne 300-ms-Long-Task für die vollständige Hydration; danach sehen Sie mehrere kleine, zeitlich verteilte Aufgaben.

Das Anti-Pattern, das die selektive Hydration zunichtemacht, besteht darin, alle Komponenten am Anfang Ihrer App zu importieren: import Footer from './Footer'. Dadurch muss der Browser den Code von Footer herunterladen, analysieren und ausführen, bevor irgendeine Hydration beginnt. Ersetzen Sie Imports von Komponenten unterhalb des sichtbaren Bereichs auf oberster Ebene durch React.lazy und dynamische Imports.

Verwenden Sie const Footer = React.lazy(() => import('./Footer')) für Komponenten, die unterhalb des initialen Viewports erscheinen. Kapseln Sie sie mit einem einfachen Fallback in Suspense. Der Browser setzt den Abruf des Footer-Bundles auf eine niedrigere Priorität, bis die Hydration des sichtbaren Bereichs abgeschlossen ist, und verbessert dadurch auf natürliche Weise die TBT.

Streaming und selektive Hydration ergänzen sich: Streaming sendet HTML-Blöcke, um FCP und LCP zu verbessern, während selektive Hydration JavaScript-Chunks verarbeitet, um TTI und TBT zu verbessern. Zusammen verbessern sie sowohl die schnelle Anzeige von Inhalten als auch die schnelle Herstellung der Interaktivität.

React Server Components führen die selektive Hydration noch weiter: Server Components erzeugen überhaupt kein JavaScript für den Client. Nur Client Components, die mit „use client“ markiert sind, müssen hydriert werden. Dadurch verringert sich die gesamte zu hydrierende JavaScript-Menge, wodurch die selektive Hydration noch effektiver wird.

Ein praktisches Muster: Verwenden Sie renderToPipeableStream für gestreamtes HTML, kapseln Sie die Seite in einem hydrateRoot-Aufruf auf oberster Ebene (statt createRoot), um den Hydration-Modus zu aktivieren, verwenden Sie React.lazy für alle Abschnitte unterhalb des sichtbaren Bereichs und kapseln Sie jeden Abschnitt in einer Suspense-Boundary. Den Rest übernimmt React automatisch.

Wie beeinflusst Benutzerinteraktion die Priorität der selektiven Hydration in React 18?

Mit selektiver Hydration kann React Teilbäume von Komponenten schrittweise hydrieren, sobald ihr JavaScript eintrifft, statt auf das vollständige Bundle zu warten. Benutzerinteraktionen priorisieren die Hydration des anvisierten Teilbaums. React.lazy und dynamische Imports für Inhalte unterhalb des sichtbaren Bereichs ermöglichen zusammen mit Suspense-Boundaries dieses schrittweise Vorgehen. Selektive Hydration und Streaming-SSR sind sich ergänzende Techniken, die gemeinsam sowohl die Inhaltsübertragung als auch die Interaktivität verbessern.