Implementierung Spezifischer Teil-Loader
Bis jetzt haben wir komplette Seiten gestreamt. Mit React Suspense können wir jedoch gezielter vorgehen und bestimmte Komponenten streamen.
Suspense ermöglicht es, Teile der Anwendung erst dann anzuzeigen, wenn eine bestimmte Bedingung erfüllt ist, beispielsweise wenn Daten geladen wurden. Dazu werden die dynamischen Komponenten in Suspense eingebettet und eine temporäre Komponente bereitgestellt, die während des Ladevorgangs angezeigt wird. Damit dies funktioniert, muss das Laden der Daten in die jeweilige Komponente verschoben werden.
Zurück zum Projekt
Löschen Sie fetchIncome() und die zugehörigen Daten aus app/dashboard/(overview)/page.tsx:
Importiere <Suspense> aus React und umschließe das <IncomeChart/> damit. Es kann eine Fallback-Komponente namens <IncomeChartSkeleton> übergeben werden.
Abschließend sollte die <IncomeChart>-Komponente aktualisiert werden, um ihre eigenen Daten abzurufen und die übergebene Prop zu entfernen:
Aktualisiere nun die Live-Seite; es sollte ein Skeleton Loader an der Stelle des Diagramms angezeigt werden, während die Daten geladen werden.
In der Praxis
Wichtig: Es ist nicht erforderlich, die Datei layout.tsx in den Ordner (overview) zu verschieben, wie im Video gezeigt.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how Suspense improves the user experience in this scenario?
What should I do if the skeleton loader does not appear when the data is loading?
Is there anything else I need to update in other components to support Suspense?
Awesome!
Completion rate improved to 2.08Implementierung Spezifischer Teil-Loader
Swipe um das Menü anzuzeigen
Bis jetzt haben wir komplette Seiten gestreamt. Mit React Suspense können wir jedoch gezielter vorgehen und bestimmte Komponenten streamen.
Suspense ermöglicht es, Teile der Anwendung erst dann anzuzeigen, wenn eine bestimmte Bedingung erfüllt ist, beispielsweise wenn Daten geladen wurden. Dazu werden die dynamischen Komponenten in Suspense eingebettet und eine temporäre Komponente bereitgestellt, die während des Ladevorgangs angezeigt wird. Damit dies funktioniert, muss das Laden der Daten in die jeweilige Komponente verschoben werden.
Zurück zum Projekt
Löschen Sie fetchIncome() und die zugehörigen Daten aus app/dashboard/(overview)/page.tsx:
Importiere <Suspense> aus React und umschließe das <IncomeChart/> damit. Es kann eine Fallback-Komponente namens <IncomeChartSkeleton> übergeben werden.
Abschließend sollte die <IncomeChart>-Komponente aktualisiert werden, um ihre eigenen Daten abzurufen und die übergebene Prop zu entfernen:
Aktualisiere nun die Live-Seite; es sollte ein Skeleton Loader an der Stelle des Diagramms angezeigt werden, während die Daten geladen werden.
In der Praxis
Wichtig: Es ist nicht erforderlich, die Datei layout.tsx in den Ordner (overview) zu verschieben, wie im Video gezeigt.
Danke für Ihr Feedback!
