Précédemment, nous avons abordé la manière de rendre l'application dynamique. Cependant, la gestion d'un grand volume de données peut entraîner des récupérations de données lentes, ce qui nuit aux performances de l'application.

Examinons maintenant des stratégies pour améliorer l'expérience utilisateur lors du traitement de requêtes de données lentes.

Théorie

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

Le streaming consiste à envoyer des informations en petites parties plutôt qu'en une seule fois. Imaginez cela comme le fait de diviser un long trajet en étapes plus courtes et de n'effectuer chaque étape que lorsque vous êtes prêt. Cela permet d'éviter les retards et d'afficher ou d'utiliser des parties d'une page web sans attendre le chargement complet.

Dans Next.js, il existe deux façons de mettre en œuvre le streaming :

• Pour l'ensemble de la page web, on utilise un fichier nommé loading.tsx ;
• Pour des parties spécifiques de la page web, on utilise un composant appelé <Suspense>.

Examinons de plus près le fonctionnement de cette approche.

Diffusion de toute la page

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

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

Excellent travail ! Vous venez d’utiliser le streaming.

Correction du bug

Le problème actuel rencontré est que le chargeur utilisé dans le fichier loading.tsx s’applique à toutes les pages du dossier dashboard. Cependant, que faire si des éléments d’interface spécifiques sont nécessaires pour chaque page de l’application ?

Pour corriger ce bug, il est possible d’implémenter les 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.

Ainsi, le fichier loading.tsx ne s’appliquera qu’à la page du tableau de bord, ce qui résout le problème.

Les groupes de routes permettent d’organiser proprement les fichiers sans modifier l’adresse web. Lorsqu’un dossier est créé avec des parenthèses (), le nom du dossier n’apparaît pas dans l’adresse web. Par exemple, /dashboard/(overview)/page.tsx devient simplement /dashboard.