Organiser les états par route

Une page qui attend une réponse réseau ne doit pas sembler bloquée. Et si cette réponse échoue, la personne qui consulte le catalogue doit pouvoir réessayer sans confondre l’incident avec une recherche sans résultat.

Dans cette leçon, vous vérifiez les états de deux routes distinctes : le catalogue et la fiche d’une randonnée. L’objectif est de vous assurer que chaque route présente une réponse cohérente pendant son chargement et en cas d’erreur, tandis que l’absence de résultat reste un état normal du catalogue.

Associer chaque état au bon segment

Dans l’App Router, les fichiers d’état sont placés dans l’arborescence des routes. Le catalogue, servi par app/page.tsx, utilise app/loading.tsx et app/error.tsx. La fiche, servie par app/randonnees/[id]/page.tsx, peut avoir ses propres fichiers loading.tsx et error.tsx dans le dossier dynamique.

Un fichier placé dans le dossier de la fiche définit un état propre à cette route. Vous évitez ainsi d’afficher, pendant le chargement d’une randonnée, un message qui parle du catalogue entier. Les états déjà mis en place pour le catalogue restent inchangés ; cette leçon complète leur couverture pour les fiches détail.

Ajouter les états de la fiche détail

Créez les deux fichiers suivants dans app/randonnees/[id]/. Le chargement annonce précisément la ressource attendue. L’état d’erreur est un composant client, car le bouton appelle reset pour relancer le segment après un échec.

export default function Loading() {
  return (
    <p className="rando-etat" role="status">
      Chargement de la randonnée…
    </p>
  );
}

'use client';

export default function Error({ reset }: { reset: () => void }) {
  return (
    <div className="rando-etat" role="alert">
      <p>Impossible de charger cette randonnée.</p>
      <button className="rando-bouton" onClick={reset}>
        Réessayer
      </button>
    </div>
  );
}

Vérifier les états route par route

Vérifiez chaque route séparément, plutôt que de vous limiter à constater la présence des fichiers. Les états doivent correspondre à des situations distinctes : attente d’une réponse, erreur de lecture ou réponse valide qui ne contient aucun résultat. Une fiche inexistante relève du traitement prévu par la page détail, et non d’un message de chargement permanent.

Pour tester sans modifier la structure du projet, contrôlez le comportement avec des réponses simulées dans votre environnement de développement : une réponse lente permet d’observer le chargement ; une erreur réseau permet de vérifier le message et le bouton de nouvelle tentative ; une réponse valide vide permet de confirmer que le catalogue affiche son état vide, sans déclencher l’interface d’erreur. Pour une fiche, vérifiez aussi qu’une randonnée valide sans avis reste une fiche réussie.

À retenir

• Le catalogue et la fiche détail ont des fichiers d’état placés dans leurs propres segments de route.
• Adaptez le texte de chargement et d’erreur à la ressource concernée.
• Réservez les frontières d’erreur aux échecs ; une réponse vide reste un état normal à traiter dans la page.
• Vérifiez séparément chargement, erreur, résultat vide et fiche sans avis.

La suite du cours utilisera ces routes pour construire le formulaire d’avis, puis traiter son enregistrement côté serveur.