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

Hvad med `Card`-komponenterne, skal vi tilføje loaderen til hver enkelt kort, eller hvordan håndteres denne komponent?

Ved hentning af data til individuelle `<Card>`-komponenter kan der opstå et potentielt problem – indlæsning af hvert kort separat kan forårsage en *pop-effekt*, når de vises. Denne pludselige visuelle ændring kan virke forstyrrende for brugeren.

For at afbøde dette problem bør følgende trin overvejes i `page.tsx`-filen.

## Tilbage til projektet
- Slet `<Card>`-komponenterne;
- Slet funktionen `fetchCardData()`;
- Importér en ny wrapper-komponent kaldet `<CardWrapper />`;
- Importér en ny skelet-komponent kaldet `<CardsSkeleton />`;
- Indpak `<CardWrapper />` i `Suspense`.

- Naviger til `app/ui/dashboard/cards.tsx`;
- Importér `fetchCardData()`;
- Kald `fetchCardData()` inde i `<CardWrapper/>`-komponenten;
- Fjern kommentar fra nødvendig kode.

Lær at opbygge moderne, højtydende webapplikationer med Next.js. Opsæt projekter med strukturerede layouts, styling og routing for problemfri navigation. Hent og vis data effektivt, mens du optimerer rendering og ydeevne. Implementer avancerede funktioner som paginering, CRUD-operationer og global søgning for dynamiske webapps. Udrul dine Next.js-projekter, tilslut dem til databaser, og tilføj autentificering for at beskytte brugerdata.

Vi gennemgår, hvad du bør have kendskab til, før du går i gang med Next.js-rammeværket, hvad du kan forvente af dette kursus, og hvilke projekter du kommer til at bygge.

Vi opsætter projektet, undersøger metoder til at tilføje styling til vores app og dækker visuelle aspekter såsom billeder, skrifttyper, sider og layouts.

Lær, hvordan du nemt opretter og administrerer et nyt view til din app og navigerer problemfrit gennem alle sider med et integreret routing-system.

Udrul Next.js-appen ved hjælp af GitHub- og Vercel-konti. Etabler desuden en database for at forsyne appen med de nødvendige data.

Overvej, hvordan data kan indhentes og vises for brugeren på en klar og effektiv måde.

Opdag, hvordan moderne webfunktioner som paginering, CRUD-operationer, global søgning, formularvalidering og mere implementeres.

Implementering af autentificering i Next.js.

Optimering af Indlæsere med Komponentgruppering

Tilbage til projektet

I praksis

Awesome!

Optimering af Indlæsere med Komponentgruppering

Tilbage til projektet

I praksis