Jusqu'à présent, nous avons diffusé des pages entières. Cependant, nous pouvons être plus précis en utilisant React Suspense pour diffuser des composants spécifiques.

Suspense nous permet de retarder l'affichage de certaines parties de votre application jusqu'à ce qu'une condition spécifique soit remplie, comme lorsque les données sont chargées. Il suffit d'envelopper les composants dynamiques dans Suspense et de fournir un composant temporaire à afficher pendant le chargement de la partie dynamique. Pour que cela se produise, 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 :

Importez <Suspense> de React et enveloppez <IncomeChart/> avec. Nous pouvons passer un composant de secours appelé <IncomeChartSkeleton>.

Enfin, nous devrions mettre à jour le composant <IncomeChart> pour qu'il récupère ses propres données et supprimer la prop qui lui est passée :

Maintenant, actualisez la page en direct ; vous devriez remarquer un chargeur de squelette à l'emplacement du graphique pendant le chargement des données.

En Pratique

Important : Nous n'avons pas besoin de déplacer le fichier layout.tsx dans le dossier (overview) comme montré dans la vidéo.