Suspense-Grenzen und Streaming-Priorität

Suspense-Boundaries sind die grundlegende Einheit für die Granularität des Streamings. Jede Suspense-Boundary in Ihrem Komponentenbaum erzeugt einen unabhängig streambaren Abschnitt — React kann jede Boundary in ihrem eigenen Tempo auflösen und streamen, unabhängig von allen anderen.

Die Shell umfasst alles außerhalb von Suspense-Boundaries — das Layout, die Navigation, die Fußzeile und alle synchron verfügbaren Inhalte. Die Shell wird zuerst und schnell gestreamt. Dadurch sehen Benutzer sofort die Seitenstruktur, während datenabhängige Abschnitte im Hintergrund geladen werden.

Wenn React die Shell streamt, wird jede Suspense-Boundary, deren Daten noch nicht verfügbar sind, mit ihrer Fallback-UI gerendert — typischerweise mit einem Lade-Skeleton oder einem Spinner. Dieser Fallback ist in der initialen HTML-Antwort enthalten. Der Benutzer sieht daher sofort einen Ladeindikator statt eines leeren Bereichs.

Sobald die Daten einer Suspense-Boundary aufgelöst sind, streamt React das aufgelöste HTML zusammen mit einem kleinen Inline-Skript. Dieses Skript verschiebt die neu gestreamten Inhalte aus einem ausgeblendeten Template-Element an die richtige Position im DOM und ersetzt den Fallback, ohne die gesamte Seite neu zu laden.

React verwendet das Muster des HTML-Template-Elements: Aufgelöste Suspense-Inhalte werden in ein ausgeblendetes Template gestreamt. Anschließend ruft ein Skript eine interne React-Funktion auf, die den Template-Inhalt an die richtige Position im DOM verschiebt. Dadurch ist für das Ersetzen keine DOM-Manipulation durch ein JavaScript-Framework erforderlich.

Verschachtelte Suspense-Boundaries haben unabhängige Auflösungszeitpunkte. Eine innere Suspense-Boundary kann vor ihrer äußeren Boundary aufgelöst werden — React streamt die inneren Inhalte, sobald sie bereit sind, unabhängig davon, ob die äußere Boundary bereits aufgelöst wurde. So wird die Parallelität beim Laden der Daten maximiert.

Bei einer effektiven Platzierung von Suspense werden langsame, datenabhängige Komponenten innerhalb von Suspense-Boundaries und schnelle, statische oder synchron verfügbare Inhalte außerhalb platziert. Navigationsleisten, Hero-Abschnitte mit statischem Text und Fußzeilen gehören nach außen. Produktlisten, Benutzer-Dashboards und Kommentar-Feeds gehören nach innen.

React streamt Suspense-Boundaries, sobald sie aufgelöst sind — nicht unbedingt in der Reihenfolge, in der sie im Dokument erscheinen. Ein Abschnitt weiter unten im sichtbaren Dokumentbereich kann vor einem Abschnitt weiter oben aufgelöst werden, wenn dafür weniger Daten benötigt werden. React fügt die Inhalte unabhängig von der Streaming-Reihenfolge korrekt in das DOM ein.

Die selektive Hydration von React 18 reagiert auf Benutzerinteraktionen: Wenn der Benutzer auf eine Suspense-Boundary klickt oder mit ihr interagiert, die noch nicht hydriert wurde, priorisiert React die Hydration dieser Boundary. Dadurch reagieren Benutzerinteraktionen auch dann unmittelbar, wenn andere Teile der Seite noch hydriert werden.

Mehr Suspense-Boundaries bieten mehr Flexibilität beim Streaming, aber zu viele Boundaries verursachen durch zusätzliche Inline-Skripte für das Ersetzen mehr Overhead. Als praktische Richtlinie sollten Sie ganze „Abschnitte“ kapseln — etwa Inhalte im sichtbaren Bereich, die Seitenleiste oder einen Feed weiter unten — statt einzelne Komponenten. Ein bis drei Suspense-Boundaries pro Seite sind häufig ein guter Kompromiss.

Verwenden Sie im Netzwerk-Tab von Chrome DevTools die Option „Preserve log“ und beobachten Sie das Streaming der Antwort: Das HTML-Dokument wächst in Blöcken. Der Tab „Performance“ zeigt die Marker für FCP und LCP. Vergleichen Sie Streaming- und nicht streamende Builds, um die Verbesserung zu quantifizieren. Begrenzen Sie die Verbindung auf Fast 3G, um den Effekt zu verstärken.

Was geschieht mit dem Fallback einer Suspense-Boundary in der initialen Streaming-HTML-Antwort?

Suspense-Boundaries teilen Ihren React-Baum in unabhängig streambare Abschnitte auf. Die Shell außerhalb von Suspense wird zuerst gestreamt; für ausstehende Boundaries werden Fallbacks sofort angezeigt; aufgelöste Inhalte ersetzen die Fallbacks über Inline-Skripte. Verschachtelte Boundaries haben unabhängige Zeitabläufe. Platzieren Sie Boundaries auf Abschnittsebene, um eine optimale Streaming-Granularität zu erreichen, und überlassen Sie Reacts Prioritätssystem die Reihenfolge der durch Interaktionen ausgelösten Hydration.