Revalider les données après écriture

Après la publication d’un avis, l’écriture peut réussir sans que la fiche affichée reflète immédiatement ce nouvel état. Vous devez donc signaler à Next.js quelles données sont devenues obsolètes, et le faire uniquement après une écriture confirmée.

Dans la leçon précédente, vous avez ajouté l’envoi serveur de l’avis et la gestion des erreurs d’écriture. Vous allez maintenant compléter cette action avec revalidatePath pour actualiser la route de la randonnée concernée.

Cibler la route modifiée

revalidatePath, importée depuis next/cache, demande à Next.js de revalider le chemin fourni. Ici, l’avis est associé à une seule randonnée : le chemin à cibler est donc /randonnees/ suivi de son identifiant. La liste des avis est affichée sur cette fiche ; revalider cette route permet de la recalculer avec les données actualisées.

Placez l’appel après la requête d’écriture et après la vérification de son statut HTTP. Si l’appel au service échoue ou renvoie une réponse d’échec, l’action lève une erreur et la revalidation n’est pas exécutée. Vous évitez ainsi de traiter une écriture refusée comme une mutation aboutie.

Compléter l’action serveur

Voici le fichier complet app/actions/avis.ts à cet état du projet. La validation et la normalisation précèdent l’envoi ; l’URL du service reste lue côté serveur. L’appel à revalidatePath n’est atteint qu’après une réponse HTTP de réussite.

'use server';

import { revalidatePath } from 'next/cache';

export async function ajouterAvis(formData: FormData) {
  const randonneeId = formData.get('randonneeId');
  const texteRecu = formData.get('texte');

  if (
    typeof randonneeId !== 'string' ||
    randonneeId.trim() === '' ||
    typeof texteRecu !== 'string'
  ) {
    throw new Error('Les données de l’avis sont invalides.');
  }

  const texte = texteRecu.trim();

  if (texte === '' || texte.length > 1000) {
    throw new Error('Le commentaire doit contenir entre 1 et 1 000 caractères.');
  }

  const apiUrl = process.env.RANDONNEES_API_URL;

  if (!apiUrl) {
    throw new Error('Le service des randonnées n’est pas configuré.');
  }

  const reponse = await fetch(`${apiUrl}/avis`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ randonneeId, texte })
  });

  if (!reponse.ok) {
    throw new Error('L’enregistrement de l’avis a échoué.');
  }

  revalidatePath(`/randonnees/${encodeURIComponent(randonneeId)}`);
}

Dans cette action, une réponse HTTP de réussite signifie que le service a accepté l’écriture. Si votre service utilise un chemin ou un format de requête différent, conservez son contrat existant : l’ajout essentiel de cette leçon est l’import de revalidatePath et l’appel placé après la vérification de reponse.ok. L’identifiant encodé sert à construire un segment d’URL sûr.

Comprendre le résultat

Après une écriture réussie, Next.js peut régénérer la fiche lors de sa prochaine lecture et récupérer les avis depuis la source de données. Si les lectures de cette fiche utilisent aussi un cache configuré séparément, vérifiez que ce cache peut fournir des données fraîches après la mutation ; la revalidation du chemin ne remplace pas une stratégie de cache incohérente dans la fonction de lecture.

Cette action ne renvoie pas directement le nouvel avis au navigateur et ne modifie pas le formulaire. Elle rend obsolète la route associée afin que Next.js actualise les données servies pour cette page. Vous disposez ainsi d’une invalidation ciblée, sans ajouter d’état client ni exposer l’accès au service.

À retenir

• Importez `revalidatePath` depuis `next/cache` dans l’action serveur.
• Appelez-le après la réussite confirmée de l’écriture.
• Ciblez `/randonnees/{id}` pour actualiser la fiche et ses avis.
• Une erreur d’écriture doit empêcher la revalidation.
• Vérifiez que le cache de lecture ne sert pas encore des données périmées.

Dans la prochaine leçon, vous assemblerez la page catalogue filtrable à partir des routes et des états déjà préparés.