Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Implémentation de Chargeurs de Parties Spécifiques | Récupération et Affichage des Données dans Next.js
Maîtrise de Next.js 14 pour la Création d'Applications Web Modernes

bookImplé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.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

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.08

bookImplé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.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 6
some-alt