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

Hur hanterar vi `Card`-komponenterna, bör vi lägga till en loader för varje kort eller hur ska denna komponent hanteras?

Vid hämtning av data för individuella `<Card>`-komponenter kan ett potentiellt problem uppstå – att ladda varje kort separat kan orsaka en *pop-effekt* när de laddas in. Denna plötsliga visuella förändring kan upplevas som störande för användaren.

För att minska detta problem, överväg följande steg i `page.tsx`-filen.

## Tillbaka till projektet
- Ta bort `<Card>`-komponenterna;
- Ta bort funktionen `fetchCardData()`;
- Importera en ny wrapper-komponent kallad `<CardWrapper />`;
- Importera en ny skelettkomponent kallad `<CardsSkeleton />`;
- Omslut `<CardWrapper />` med `Suspense`.

- Navigera till `app/ui/dashboard/cards.tsx`;
- Importera `fetchCardData()`;
- Anropa `fetchCardData()` inuti `<CardWrapper/>`-komponenten;
- Avkommentera nödvändig kod.

Lär dig att bygga moderna, högpresterande webbapplikationer med Next.js. Sätt upp projekt med strukturerade layouter, styling och routing för smidig navigering. Hämta och visa data effektivt samtidigt som rendering och prestanda optimeras. Implementera avancerade funktioner som paginering, CRUD-operationer och global sökning för dynamiska webbappar. Distribuera dina Next.js-projekt, anslut dem till databaser och lägg till autentisering för att skydda användardata.

Vi diskuterar vad du behöver kunna innan du börjar med Next.js-ramverket, vad du kan förvänta dig av denna kurs och vad du kommer att bygga.

Vi kommer att konfigurera projektet, undersöka olika sätt att lägga till styling i vår app och behandla visuella aspekter såsom bilder, typsnitt, sidor och layouter.

Lär dig att enkelt skapa och hantera en ny vy för din applikation samt navigera mellan alla sidor smidigt med ett inbyggt routingsystem.

Distribuera Next.js-appen med hjälp av GitHub- och Vercel-konton. Upprätta dessutom en databas för att förse appen med nödvändig data.

Överväg hur data kan erhållas och presenteras för användaren på ett tydligt och effektivt sätt.

Utforska hur moderna webbtekniker som paginering, CRUD-operationer, global sökning, formulärvalidering och mer implementeras.

Implementering av autentisering i Next.js.

Optimering av Laddare med Komponentgruppering

Tillbaka till projektet

I praktiken

Awesome!

Optimering av Laddare med Komponentgruppering

Tillbaka till projektet

I praktiken