Implementering af Specifikke Delindlæsere
Indtil nu har vi streamet hele sider. Vi kan dog være mere detaljerede ved at bruge React Suspense til at streame specifikke komponenter.
Suspense giver mulighed for at udskyde visningen af dele af din applikation, indtil en bestemt betingelse er opfyldt, f.eks. når data er indlæst. Omslut blot de dynamiske komponenter med Suspense og angiv en midlertidig komponent, der vises, mens den dynamiske del indlæses. For at gøre dette skal datahentningen flyttes ind i komponenten.
Tilbage til projektet
Slet fetchIncome() og dets data fra app/dashboard/(overview)/page.tsx:
Importer <Suspense> fra React og omgiv <IncomeChart/> med den. Vi kan angive en fallback-komponent kaldet <IncomeChartSkeleton>.
Til sidst bør <IncomeChart>-komponenten opdateres til selv at hente sine data og fjerne den prop, der blev givet til den:
Opdater nu den aktive side; der bør vises en skelet-loader på diagrammets plads, mens dataene indlæses.
I praksis
Vigtigt: Det er ikke nødvendigt at flytte filen layout.tsx til mappen (overview) som vist i videoen.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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.08Implementering af Specifikke Delindlæsere
Stryg for at vise menuen
Indtil nu har vi streamet hele sider. Vi kan dog være mere detaljerede ved at bruge React Suspense til at streame specifikke komponenter.
Suspense giver mulighed for at udskyde visningen af dele af din applikation, indtil en bestemt betingelse er opfyldt, f.eks. når data er indlæst. Omslut blot de dynamiske komponenter med Suspense og angiv en midlertidig komponent, der vises, mens den dynamiske del indlæses. For at gøre dette skal datahentningen flyttes ind i komponenten.
Tilbage til projektet
Slet fetchIncome() og dets data fra app/dashboard/(overview)/page.tsx:
Importer <Suspense> fra React og omgiv <IncomeChart/> med den. Vi kan angive en fallback-komponent kaldet <IncomeChartSkeleton>.
Til sidst bør <IncomeChart>-komponenten opdateres til selv at hente sine data og fjerne den prop, der blev givet til den:
Opdater nu den aktive side; der bør vises en skelet-loader på diagrammets plads, mens dataene indlæses.
I praksis
Vigtigt: Det er ikke nødvendigt at flytte filen layout.tsx til mappen (overview) som vist i videoen.
Tak for dine kommentarer!
