Next.js I metadati non si aggiornano? Ecco perché

Aggiorna generateMetadata, ridistribuisci e il vecchio titolo o immagine viene ancora visualizzato quando condividi il collegamento. Ecco come determinare se si tratta di un livello di memorizzazione nella cache o di un errore di codice.

Esempio riproducibile

Sembra corretto ma continuerà a fornire metadati non aggiornati dopo una modifica del contenuto:

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],
    },
  };
}

La chiamata fetch qui viene memorizzata nella cache dalla cache dati di Next.js per impostazione predefinita. Se post.title o post.image cambia nel tuo CMS, questa funzione non vedrà il nuovo valore finché la cache non viene riconvalidata. Senza una strategia esplicita, ciò può significare non prima della prossima costruzione completa.

Perché i tuoi metadati non si aggiornano

Il recupero sottostante viene memorizzato nella cache

Per impostazione predefinita, fetch() all'interno di generateMetadata viene memorizzato nella cache a tempo indeterminato nell'App Router. Risolvi il problema impostando una finestra di riconvalida esplicita:

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

Oppure disattiva completamente la memorizzazione nella cache per quella richiesta:

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

Il percorso è generato staticamente

Se il percorso utilizza generateStaticParams senza riconvalida configurata, l'intero percorso, metadati inclusi, viene integrato in fase di compilazione. L'aggiunta di export const revalidate = 3600; a livello di pagina forza la rigenerazione periodica.

Una CDN o una cache edge serve il vecchio HTML

Anche se la tua build è corretta, Edge Network di Vercel, Cloudflare o un altro CDN davanti alla tua app può fornire una risposta HTML memorizzata nella cache che precede la correzione. Controlla le intestazioni delle risposte:

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

Cerca x-vercel-cache: HIT o un'intestazione simile CDN. Un HIT significa che stai guardando una copia memorizzata nella cache, non la tua ultima distribuzione.

opengraph-image.ts non raccoglie nuovi dati

Se stai utilizzando la convenzione opengraph-image.ts basata su file, Next.js genera un'immagine statica in fase di creazione per impostazione predefinita. Il contenuto dinamico al suo interno è soggetto alle stesse regole di memorizzazione nella cache di qualsiasi altro componente server, quindi aggiungi una riconvalida esplicita se deve rimanere aggiornato.

In realtà è la cache della piattaforma, non la tua

Il falso allarme più comune. La tua app può fornire metadati perfettamente aggiornati mentre Facebook, LinkedIn o Slack mostrano ancora un'anteprima memorizzata nella cache giorni fa. Conferma ciò che il tuo server sta inviando prima di toccare qualsiasi codice Next.js. Consulta la nostra guida per svuotare la cache degli OG su ogni piattaforma.

Guida alla risoluzione passo passo

1. Esegui curl -s https://yoursite.com/page | grep -i "og:" per vedere cosa invia effettivamente il tuo server
2. Verifica la presenza di un'intestazione CDN cache HIT con curl -I https://yoursite.com/page
3. Aggiungi revalidate o cache esplicito: "no-store" ai recuperi all'interno di generateMetadata
4. Forza una nuova distribuzione per escludere una cache di build obsoleta
5. Verifica il risultato live con Proovd

Next.js rispetto ad altri framework

Elenco di controllo per la correzione rapida

Domande frequenti