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

Entä `Card`-komponentit, pitäisikö lisätä latausilmaisin jokaiselle kortille vai miten tämä komponentti tulisi käsitellä?

Kun haetaan dataa yksittäisille `<Card>`-komponenteille, mahdollinen ongelma on, että jokaisen kortin lataaminen erikseen voi aiheuttaa *ponnahdusilmiön* niiden latautuessa. Tämä äkillinen visuaalinen muutos voi olla häiritsevä käyttäjille.

Tämän ongelman lieventämiseksi harkitse seuraavia vaiheita tiedostossa `page.tsx`. 

## Takaisin projektiin
- Poista `<Card>`-komponentit;
- Poista `fetchCardData()`-funktio;
- Tuo uusi wrapper-komponentti nimeltä `<CardWrapper />`;
- Tuo uusi skeleton-komponentti nimeltä `<CardsSkeleton />`;
- Kääri `<CardWrapper />` `Suspense`-komponenttiin.

- Siirry tiedostoon `app/ui/dashboard/cards.tsx`;
- Tuo `fetchCardData()`;
- Kutsu `fetchCardData()` komponentin `<CardWrapper/>` sisällä;
- Poista tarvittavien koodirivien kommentointi.

Opi rakentamaan moderneja, suorituskykyisiä web-sovelluksia Next.js:llä. Luo projekteja, joissa on jäsennelty ulkoasu, tyylittely ja reititys sujuvaa navigointia varten. Nouda ja näytä dataa tehokkaasti samalla kun optimoit renderöintiä ja suorituskykyä. Toteuta edistyneitä ominaisuuksia, kuten sivutus, CRUD-toiminnot ja globaali haku dynaamisia web-sovelluksia varten. Julkaise Next.js-projektisi, yhdistä ne tietokantoihin ja lisää autentikointi käyttäjätietojen suojaamiseksi.

Käydään läpi, mitä tulee hallita ennen Next.js-kehykseen perehtymistä, mitä tältä kurssilta voi odottaa ja mitä tulet rakentamaan.

Projektin perustaminen, tyylien lisäämistavat sovellukseen sekä visuaalisten osa-alueiden, kuten kuvien, fonttien, sivujen ja asetteluiden käsittely.

Opi luomaan ja hallitsemaan sovelluksesi uusia näkymiä vaivattomasti sekä navigoimaan saumattomasti kaikkien sivujen välillä sisäänrakennetun reititysjärjestelmän avulla.

Ota Next.js-sovellus käyttöön GitHub- ja Vercel-tunnusten avulla. Perusta lisäksi tietokanta, joka toimittaa sovellukselle tarvittavat tiedot.

Pohdi, miten data hankitaan ja esitetään käyttäjälle selkeästi ja tehokkaasti.

Opi toteuttamaan moderneja verkkosivustojen ominaisuuksia, kuten sivutus, CRUD-toiminnot, globaali haku, lomakkeiden validointi ja paljon muuta.

Lataajien Optimointi Komponenttiryhmittelyllä

Takaisin projektiin

Käytännössä

Awesome!

Lataajien Optimointi Komponenttiryhmittelyllä

Takaisin projektiin

Käytännössä