Tiettyjen 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.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.08Tiettyjen 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.
Kiitos palautteestasi!
