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

Hva med `Card`-komponentene, bør vi legge til en loader for hver enkelt kort, eller hvordan bør denne komponenten håndteres?

Når man henter data for individuelle `<Card>`-komponenter, kan det oppstå et potensielt problem – lasting av hvert kort separat kan føre til en *popping-effekt* når de lastes inn. Denne plutselige visuelle endringen kan virke forstyrrende for brukeren.

For å redusere dette problemet, vurder følgende steg i `page.tsx`-filen.

## Tilbake til prosjektet
- Slett `<Card>`-komponentene;
- Slett funksjonen `fetchCardData()`;
- Importer en ny wrapper-komponent kalt `<CardWrapper />`;
- Importer en ny skjelett-komponent kalt `<CardsSkeleton />`;
- Pakk inn `<CardWrapper />` i `Suspense`.

- Naviger til `app/ui/dashboard/cards.tsx`;
- Importer `fetchCardData()`;
- Kall `fetchCardData()` inne i `<CardWrapper/>`-komponenten;
- Fjern kommentar fra nødvendig kode.

Lær å bygge moderne, høytytende webapplikasjoner med Next.js. Sett opp prosjekter med strukturerte oppsett, styling og ruting for sømløs navigasjon. Hent og vis data effektivt samtidig som du optimaliserer rendering og ytelse. Implementer avanserte funksjoner som paginering, CRUD-operasjoner og globalt søk for dynamiske webapplikasjoner. Distribuer dine Next.js-prosjekter, koble dem til databaser og legg til autentisering for å beskytte brukerdata.

Vi skal diskutere hva du bør kunne før du begynner med Next.js-rammeverket, hva du kan forvente av dette kurset, og hva du kommer til å bygge.

Vi setter opp prosjektet, undersøker måter å legge til styling i appen vår på, og dekker visuelle aspekter som bilder, fonter, sider og oppsett.

Lær hvordan du enkelt kan opprette og administrere et nytt visningsbilde for applikasjonen din, samt navigere sømløst mellom alle sider med et integrert rutingsystem.

Distribuer Next.js-appen ved hjelp av GitHub- og Vercel-kontoer. Etabler i tillegg en database for å levere nødvendig data til appen.

Vurder hvordan data kan hentes og vises for brukeren på en tydelig og effektiv måte.

Lær hvordan du implementerer moderne nettfunksjoner som paginering, CRUD-operasjoner, globalt søk, skjemavalidering og mer.

Implementering av autentisering i Next.js.

Optimalisering av Lastere med Komponentgruppering

Tilbake til prosjektet

I praksis

Awesome!

Optimalisering av Lastere med Komponentgruppering

Tilbake til prosjektet

I praksis