Implémentation de Chargeurs de Parties Spécifiques
Jusqu'à présent, nous avons diffusé des pages entières. Cependant, il est possible d'être plus précis en utilisant Suspense de React pour diffuser des composants spécifiques.
Suspense permet de retarder l'affichage de certaines parties de votre application jusqu'à ce qu'une condition spécifique soit remplie, comme le chargement des données. Il suffit d'entourer les composants dynamiques avec Suspense et de fournir un composant temporaire à afficher pendant le chargement de la partie dynamique. Pour cela, déplacez la récupération des données dans le composant.
Retour au projet
Supprimez fetchIncome() et ses données de app/dashboard/(overview)/page.tsx :
Importer <Suspense> depuis React et encapsuler le <IncomeChart/> avec celui-ci. Il est possible de passer un composant de secours nommé <IncomeChartSkeleton>.
Enfin, il convient de mettre à jour le composant <IncomeChart> afin qu’il récupère ses propres données et de supprimer la propriété qui lui était transmise :
Actualiser maintenant la page en direct ; un chargeur squelette devrait apparaître à l’emplacement du graphique pendant le chargement des données.
En pratique
Important : Il n'est pas nécessaire de déplacer le fichier layout.tsx dans le dossier (overview) comme indiqué dans la vidéo.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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.08Implémentation de Chargeurs de Parties Spécifiques
Glissez pour afficher le menu
Jusqu'à présent, nous avons diffusé des pages entières. Cependant, il est possible d'être plus précis en utilisant Suspense de React pour diffuser des composants spécifiques.
Suspense permet de retarder l'affichage de certaines parties de votre application jusqu'à ce qu'une condition spécifique soit remplie, comme le chargement des données. Il suffit d'entourer les composants dynamiques avec Suspense et de fournir un composant temporaire à afficher pendant le chargement de la partie dynamique. Pour cela, déplacez la récupération des données dans le composant.
Retour au projet
Supprimez fetchIncome() et ses données de app/dashboard/(overview)/page.tsx :
Importer <Suspense> depuis React et encapsuler le <IncomeChart/> avec celui-ci. Il est possible de passer un composant de secours nommé <IncomeChartSkeleton>.
Enfin, il convient de mettre à jour le composant <IncomeChart> afin qu’il récupère ses propres données et de supprimer la propriété qui lui était transmise :
Actualiser maintenant la page en direct ; un chargeur squelette devrait apparaître à l’emplacement du graphique pendant le chargement des données.
En pratique
Important : Il n'est pas nécessaire de déplacer le fichier layout.tsx dans le dossier (overview) comme indiqué dans la vidéo.
Merci pour vos commentaires !
