Bis jetzt haben wir ganze Seiten gestreamt. Wir können jedoch detaillierter vorgehen, indem wir React Suspense verwenden, um spezifische Komponenten zu streamen.

Suspense ermöglicht es uns, Teile Ihrer App erst dann anzuzeigen, wenn eine bestimmte Bedingung erfüllt ist, wie zum Beispiel, wenn Daten geladen sind. Wickeln Sie einfach die dynamischen Komponenten in Suspense ein und stellen Sie eine temporäre Komponente bereit, die angezeigt wird, während der dynamische Teil geladen wird. Um dies zu erreichen, verschieben Sie das Datenabrufen in die Komponente.

Zurück zum Projekt

Löschen Sie fetchIncome() und seine Daten aus app/dashboard/(overview)/page.tsx:

Importiere <Suspense> aus React und umschließe <IncomeChart/> damit. Wir können eine Fallback-Komponente namens <IncomeChartSkeleton> übergeben.

Schließlich sollten wir die <IncomeChart>-Komponente aktualisieren, um ihre eigenen Daten abzurufen und die an sie übergebene Prop zu entfernen:

Aktualisieren Sie nun die Live-Seite; Sie sollten einen Skelett-Loader an der Stelle des Diagramms bemerken, während die Daten geladen werden.

In der Praxis

Wichtig: Wir müssen die Datei layout.tsx nicht in den Ordner (overview) verschieben, wie im Video gezeigt.