Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Tiettyjen Osien Lataajien Toteuttaminen | Datan Hakeminen ja Näyttäminen Next.js:ssä
Next.js 14 -osaaminen Modernien Web-sovellusten Rakentamiseen

bookTiettyjen Osien Lataajien Toteuttaminen

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.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain how Suspense improves the user experience in this scenario?

What should I do if the skeleton loader does not appear when the data is loading?

Is there anything else I need to update in other components to support Suspense?

Awesome!

Completion rate improved to 2.08

bookTiettyjen Osien Lataajien Toteuttaminen

Pyyhkäise näyttääksesi valikon

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.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 6
some-alt