Chargeurs

Précédemment, nous avons abordé la création d'une application dynamique. Cependant, traiter une grande quantité de données peut entraîner des récupérations de données lentes, impactant négativement les performances de l'application.

Maintenant, explorons des stratégies pour améliorer l'expérience utilisateur lors de la gestion de requêtes de données lentes.

Théorie

Nous pouvons utiliser la technique largement répandue appelée Streaming.

Le streaming est une façon d'envoyer des informations en plus petites parties au lieu de tout envoyer en une seule fois. Imaginez cela comme diviser un long voyage en étapes plus petites et ne prendre chaque étape que lorsque vous êtes prêt. Cela aide à éviter les retards et vous permet de voir et d'utiliser des parties d'une page web sans attendre que tout soit chargé.

Dans Next.js, il existe deux façons de faire du streaming :

• Pour l'ensemble de la page web, nous utilisons un fichier appelé loading.tsx;
• Pour des parties spécifiques de la page web, nous utilisons quelque chose appelé <Suspense>.

Examinons de plus près comment cela fonctionne.

Diffusion de la page entière

Créons un fichier loading.tsx dans le dossier dashboard pour ajouter un chargeur à l'ensemble de la page du tableau de bord.

• loading.tsx: C'est un fichier spécial dans Next.js qui utilise Suspense. Il nous aide à créer une interface utilisateur temporaire (interface de secours) à afficher pendant le chargement du contenu principal de la page;
• Comme le <Sidebar> est statique (ne change pas), il apparaît immédiatement. Les utilisateurs peuvent interagir avec lui même pendant le chargement du contenu dynamique.

Bon travail ! Vous venez d'utiliser le streaming.

Correction de bug

Le problème actuel que nous rencontrons est que le chargeur utilisé dans le fichier loading.tsx est appliqué à toutes les pages du dossier dashboard. Cependant, que faire si nous avons besoin d'éléments d'interface utilisateur spécifiques pour chaque page d'application ?

Pour résoudre ce bug, nous pouvons implémenter des Groupes de Routes. Créez un dossier (overview) à l'intérieur du répertoire dashboard et déplacez-y les fichiers loading.tsx et page.tsx.

En faisant cela, le fichier loading.tsx s'appliquera exclusivement à la page du tableau de bord, résolvant ainsi le problème.

Les Groupes de Routes nous aident à organiser les fichiers de manière ordonnée sans changer l'adresse web. Lorsque nous créons un dossier avec des parenthèses (), le nom du dossier ne fera pas partie de l'adresse web. Par exemple, /dashboard/(overview)/page.tsx devient simplement /dashboard.