Next.js Les métadonnées ne sont pas mises à jour ? Voici pourquoi

Vous mettez à jour generateMetadata, redéployez et l'ancien titre ou image apparaît toujours lorsque vous partagez le lien. Voici comment savoir s'il s'agit d'une couche de mise en cache ou d'une erreur de code.

Exemple reproductible

Cela semble correct, mais continuera à diffuser des métadonnées obsolètes après une modification du contenu :

export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());

  return {
    title: post.title,
    openGraph: {
      images: [post.image],
    },
  };
}

L'appel fetch ici est mis en cache par le cache de données de Next.js par défaut. Si post.title ou post.image change dans votre CMS, cette fonction ne verra pas la nouvelle valeur jusqu'à ce que le cache soit revalidé. Sans stratégie explicite, cela peut signifier pas avant la prochaine version complète.

Pourquoi vos métadonnées ne sont pas mises à jour

La récupération sous-jacente est mise en cache

Par défaut, fetch() à l'intérieur de generateMetadata est mis en cache indéfiniment dans l'App Router. Corrigez en définissant une fenêtre de revalidation explicite :

const post = await fetch(url, { next: { revalidate: 60 } }).then(r => r.json());

Ou désactivez complètement la mise en cache pour cette requête :

const post = await fetch(url, { cache: "no-store" }).then(r => r.json());

L'itinéraire est généré statiquement

Si la route utilise generateStaticParams sans qu'aucune revalidation ne soit configurée, la route entière, métadonnées incluses, est intégrée au moment de la construction. L'ajout de export const revalidate = 3600; au niveau de la page force une régénération périodique.

Un cache CDN ou Edge sert l'ancien HTML

Même si votre build est correcte, le réseau Edge de Vercel, Cloudflare ou un autre CDN devant votre application peut servir une réponse HTML en cache antérieure à votre correctif. Vérifiez les en-têtes de réponse :

curl -I https://yoursite.com/blog/post-slug

Recherchez x-vercel-cache: HIT ou un en-tête CDN similaire. Un HIT signifie que vous consultez une copie en cache, pas votre dernier déploiement.

opengraph-image.ts ne récupère pas de nouvelles données

Si vous utilisez la convention basée sur les fichiers opengraph-image.ts, Next.js génère par défaut une image statique au moment de la construction. Le contenu dynamique qu'il contient est soumis aux mêmes règles de mise en cache que tout autre composant serveur, ajoutez donc une revalidation explicite s'il doit rester à jour.

C'est en fait le cache de la plateforme, pas le vôtre

La fausse alerte la plus courante. Votre application peut fournir des métadonnées parfaitement récentes tandis que Facebook, LinkedIn ou Slack affichent toujours un aperçu qu'ils ont mis en cache il y a quelques jours. Confirmez ce que votre serveur envoie avant de toucher un code Next.js. Consultez notre guide pour vider le cache OG sur chaque plateforme.

Guide de réparation étape par étape

1. Exécutez curl -s https://yoursite.com/page | grep -i "og:" pour voir ce que votre serveur envoie réellement
2. Recherchez un en-tête CDN cache HIT avec curl -I https://yoursite.com/page
3. Ajoutez revalidate ou cache explicite : "no-store" pour récupérer à l'intérieur de generateMetadata
4. Forcer un nouveau déploiement pour exclure un cache de build obsolète
5. Vérifiez le résultat en direct avec Proovd

Next.js par rapport aux autres frameworks

Liste de contrôle des solutions rapides

Foire aux questions