Summary  
This chapter explains how to implement specific part loaders by using React Suspense to delay component rendering until their own data fetching completes and by providing fallback skeleton components during loading.  

General domain of usage  
Frontend web applications

Tähän asti olemme suoratoistaneet kokonaisia sivuja. Voimme kuitenkin olla tarkempia käyttämällä Reactin `Suspense`-ominaisuutta suoratoistaaksemme yksittäisiä komponentteja.

`Suspense` mahdollistaa sovelluksen osien näyttämisen viiveellä, kunnes tietty ehto täyttyy, kuten datan latautuminen. Kääri dynaamiset komponentit `Suspense`-rakenteeseen ja tarjoa väliaikainen komponentti näytettäväksi dynaamisen osan latautuessa. Tämän toteuttamiseksi siirrä datan haku komponentin sisälle.

## Takaisin projektiin
Poista `fetchIncome()` ja siihen liittyvät tiedot tiedostosta `app/dashboard/(overview)/page.tsx`:

Tuo `<Suspense>` Reactista ja ympäröi `<IncomeChart/>` sillä. Voit välittää sille varakomponentin nimeltä `<IncomeChartSkeleton>`.

Lopuksi päivitä `<IncomeChart>`-komponentti hakemaan omat tietonsa ja poista sille välitetty prop.

Päivitä nyt live-sivu; sinun pitäisi huomata luurankolataaja kaavion kohdalla datan latautuessa.

## Käytännössä
Tärkeää: Meidän ei tarvitse siirtää `layout.tsx`-tiedostoa `(overview)`-kansioon, kuten videossa näytetään.

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.

Tiettyjen Osien Lataajien Toteuttaminen

Takaisin projektiin

Käytännössä