Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Implementierung Spezifischer Teil-Loader | Abrufen und Anzeigen von Daten in Next.js
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookImplementierung 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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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.08

bookImplementierung 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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 6
some-alt