Implementering av Specifika Delladdare
Hittills har vi strömmat hela sidor. Vi kan dock vara mer detaljerade genom att använda React Suspense för att strömma specifika komponenter.
Med Suspense kan vi fördröja visningen av delar av din app tills ett specifikt villkor är uppfyllt, till exempel när data har laddats. Omslut bara de dynamiska komponenterna med Suspense och ange en temporär komponent som visas medan den dynamiska delen laddas. För att detta ska fungera, flytta datainhämtningen in i komponenten.
Tillbaka till projektet
Ta bort fetchIncome() och dess data från app/dashboard/(overview)/page.tsx:
Importera <Suspense> från React och omge <IncomeChart/> med den. Vi kan ange en fallback-komponent som heter <IncomeChartSkeleton>.
Slutligen bör vi uppdatera <IncomeChart>-komponenten så att den hämtar sin egen data och tar bort den prop som skickades till den:
Uppdatera nu den aktiva sidan; du bör se en skelettladdare på diagrammets plats medan data laddas.
I praktiken
Viktigt: Vi behöver inte flytta filen layout.tsx till mappen (overview) som visas i videon.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.08Implementering av Specifika Delladdare
Svep för att visa menyn
Hittills har vi strömmat hela sidor. Vi kan dock vara mer detaljerade genom att använda React Suspense för att strömma specifika komponenter.
Med Suspense kan vi fördröja visningen av delar av din app tills ett specifikt villkor är uppfyllt, till exempel när data har laddats. Omslut bara de dynamiska komponenterna med Suspense och ange en temporär komponent som visas medan den dynamiska delen laddas. För att detta ska fungera, flytta datainhämtningen in i komponenten.
Tillbaka till projektet
Ta bort fetchIncome() och dess data från app/dashboard/(overview)/page.tsx:
Importera <Suspense> från React och omge <IncomeChart/> med den. Vi kan ange en fallback-komponent som heter <IncomeChartSkeleton>.
Slutligen bör vi uppdatera <IncomeChart>-komponenten så att den hämtar sin egen data och tar bort den prop som skickades till den:
Uppdatera nu den aktiva sidan; du bör se en skelettladdare på diagrammets plats medan data laddas.
I praktiken
Viktigt: Vi behöver inte flytta filen layout.tsx till mappen (overview) som visas i videon.
Tack för dina kommentarer!
