Implementatie van Specifieke Onderdeel-Loaders
Tot nu toe hebben we volledige pagina's gestreamd. We kunnen echter specifieker zijn door React Suspense te gebruiken om specifieke componenten te streamen.
Met Suspense kunnen we het tonen van delen van je app uitstellen totdat aan een bepaalde voorwaarde is voldaan, zoals wanneer data is geladen. Om dit te doen, wikkel je de dynamische componenten in Suspense en geef je een tijdelijke component weer terwijl het dynamische deel laadt. Om dit mogelijk te maken, verplaats je het ophalen van data naar de component.
Terug naar het project
Verwijder fetchIncome() en de bijbehorende data uit app/dashboard/(overview)/page.tsx:
Importeer <Suspense> uit React en omhul de <IncomeChart/> hiermee. Er kan een fallback-component genaamd <IncomeChartSkeleton> worden meegegeven.
Werk ten slotte de <IncomeChart>-component bij zodat deze zelf zijn data ophaalt en verwijder de prop die eraan werd doorgegeven:
Vernieuw nu de livepagina; er zou een skeleton loader zichtbaar moeten zijn op de plaats van de grafiek terwijl de data wordt geladen.
In de praktijk
Belangrijk: Het is niet nodig om het bestand layout.tsx naar de map (overview) te verplaatsen zoals in de video wordt getoond.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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.08Implementatie van Specifieke Onderdeel-Loaders
Veeg om het menu te tonen
Tot nu toe hebben we volledige pagina's gestreamd. We kunnen echter specifieker zijn door React Suspense te gebruiken om specifieke componenten te streamen.
Met Suspense kunnen we het tonen van delen van je app uitstellen totdat aan een bepaalde voorwaarde is voldaan, zoals wanneer data is geladen. Om dit te doen, wikkel je de dynamische componenten in Suspense en geef je een tijdelijke component weer terwijl het dynamische deel laadt. Om dit mogelijk te maken, verplaats je het ophalen van data naar de component.
Terug naar het project
Verwijder fetchIncome() en de bijbehorende data uit app/dashboard/(overview)/page.tsx:
Importeer <Suspense> uit React en omhul de <IncomeChart/> hiermee. Er kan een fallback-component genaamd <IncomeChartSkeleton> worden meegegeven.
Werk ten slotte de <IncomeChart>-component bij zodat deze zelf zijn data ophaalt en verwijder de prop die eraan werd doorgegeven:
Vernieuw nu de livepagina; er zou een skeleton loader zichtbaar moeten zijn op de plaats van de grafiek terwijl de data wordt geladen.
In de praktijk
Belangrijk: Het is niet nodig om het bestand layout.tsx naar de map (overview) te verplaatsen zoals in de video wordt getoond.
Bedankt voor je feedback!
