Summary  
This chapter explains how to group related components under a single wrapper and leverage React’s Suspense with a skeleton fallback to optimize asynchronous data fetching and avoid jarring visual loading effects.  

General domain of usage  
Web user interface development

Was ist mit den `Card`-Komponenten, sollten wir den Loader für jede Karte hinzufügen oder wie soll diese Komponente gehandhabt werden?

Beim Abrufen von Daten für einzelne `<Card>`-Komponenten kann ein potenzielles Problem auftreten - das separate Laden jeder Karte kann einen *Popping-Effekt* verursachen, wenn sie geladen werden. Diese plötzliche visuelle Veränderung kann für Benutzer störend sein.

Um dieses Problem zu mildern, ziehen Sie die folgenden Schritte in der Datei `page.tsx` in Betracht.

## Zurück zum Projekt
- Löschen Sie die `<Card>`-Komponenten;
- Löschen Sie die Funktion `fetchCardData()`;
- Importieren Sie eine neue Wrapper-Komponente namens `<CardWrapper />`;
- Importieren Sie eine neue Skelett-Komponente namens `<CardsSkeleton />`;
- Wickeln Sie `<CardWrapper />` in `Suspense` ein.

- Navigieren Sie zu `app/ui/dashboard/cards.tsx`;
- Importieren Sie `fetchCardData()`;
- Rufen Sie `fetchCardData()` innerhalb der `<CardWrapper/>` Komponente auf;
- Kommentieren Sie den notwendigen Code aus.

Next.js ist ein React-Framework, das für die Erstellung von Full-Stack-Webanwendungen entwickelt wurde. Mit Next.js nutzen Sie React, um Benutzeroberflächen zu erstellen, während Sie von zusätzlichen Funktionen und Optimierungen des Frameworks profitieren.

Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.

Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.

Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.

Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.

Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.

Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.

Implementierung der Authentifizierung in Next.js.

Komponenten für Loader Gruppieren

Zurück zum Projekt

In der Praxis

Awesome!

Komponenten für Loader Gruppieren

Zurück zum Projekt

In der Praxis