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

bookOptimierung von Ladeprozessen durch Komponenten-Gruppierung

Wie sieht es mit den Card-Komponenten aus? Sollten wir für jede Karte einen Loader hinzufügen oder wie sollte diese Komponente behandelt werden?

Beim Abrufen von Daten für einzelne <Card>-Komponenten kann ein mögliches Problem auftreten – das separate Laden jeder Karte kann einen Pop-Effekt verursachen, wenn sie erscheinen. Diese plötzliche visuelle Veränderung kann für Nutzer störend sein.

Um dieses Problem zu vermeiden, sollten im page.tsx-File die folgenden Schritte berücksichtigt werden.

Zurück zum Projekt

  • Die <Card>-Komponenten löschen;
  • Die Funktion fetchCardData() löschen;
  • Eine neue Wrapper-Komponente namens <CardWrapper /> importieren;
  • Eine neue Skeleton-Komponente namens <CardsSkeleton /> importieren;
  • <CardWrapper /> in Suspense einbetten.
  • Navigiere zu app/ui/dashboard/cards.tsx;
  • Importiere fetchCardData();
  • Rufe fetchCardData() innerhalb der Komponente <CardWrapper/> auf;
  • Kommentiere den notwendigen Code ein.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 8

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Awesome!

Completion rate improved to 2.08

bookOptimierung von Ladeprozessen durch Komponenten-Gruppierung

Swipe um das Menü anzuzeigen

Wie sieht es mit den Card-Komponenten aus? Sollten wir für jede Karte einen Loader hinzufügen oder wie sollte diese Komponente behandelt werden?

Beim Abrufen von Daten für einzelne <Card>-Komponenten kann ein mögliches Problem auftreten – das separate Laden jeder Karte kann einen Pop-Effekt verursachen, wenn sie erscheinen. Diese plötzliche visuelle Veränderung kann für Nutzer störend sein.

Um dieses Problem zu vermeiden, sollten im page.tsx-File die folgenden Schritte berücksichtigt werden.

Zurück zum Projekt

  • Die <Card>-Komponenten löschen;
  • Die Funktion fetchCardData() löschen;
  • Eine neue Wrapper-Komponente namens <CardWrapper /> importieren;
  • Eine neue Skeleton-Komponente namens <CardsSkeleton /> importieren;
  • <CardWrapper /> in Suspense einbetten.
  • Navigiere zu app/ui/dashboard/cards.tsx;
  • Importiere fetchCardData();
  • Rufe fetchCardData() innerhalb der Komponente <CardWrapper/> auf;
  • Kommentiere den notwendigen Code ein.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 8
some-alt