Next.js Metagegevens worden niet bijgewerkt? Hier is waarom

Je werkt generateMetadata bij, implementeert deze opnieuw en de oude titel of afbeelding wordt nog steeds weergegeven wanneer je de link deelt. Hier ziet u hoe u kunt bepalen of het een cachinglaag of een codefout is.

Reproduceerbaar voorbeeld

Dit ziet er correct uit, maar blijft verouderde metadata weergeven na een inhoudswijziging:

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

De aanroep fetch hier wordt standaard in de cache opgeslagen door de gegevenscache van Next.js. Als post.title of post.image verandert in uw CMS, zal deze functie de nieuwe waarde pas zien als de cache opnieuw wordt gevalideerd. Zonder expliciete strategie kan dat betekenen dat het pas bij de volgende volledige build zal zijn.

Waarom uw metadata niet worden bijgewerkt

De onderliggende ophaalactie wordt in de cache opgeslagen

Standaard wordt fetch() binnen generateMetadata voor onbepaalde tijd in de App Router opgeslagen. Oplossing door een expliciete hervalidatieperiode in te stellen:

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

Of u kunt zich volledig afmelden voor caching voor dat verzoek:

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

De route wordt statisch gegenereerd

Als de route generateStaticParams gebruikt en er geen hervalidatie is geconfigureerd, wordt de volledige route, inclusief metagegevens, tijdens het bouwen ingebakken. Het toevoegen van export const revalidate = 3600; op paginaniveau dwingt periodieke regeneratie af.

Een CDN of edge cache bedient de oude HTML

Zelfs als uw build correct is, kan Vercel's Edge Network, Cloudflare of een andere CDN vóór uw app een in de cache opgeslagen HTML-antwoord weergeven dat ouder is dan uw oplossing. Controleer de antwoordheaders:

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

Zoek naar x-vercel-cache: HIT of een soortgelijke CDN header. Een HIT betekent dat u naar een in de cache opgeslagen kopie kijkt, en niet naar uw laatste implementatie.

opengraph-image.ts haalt geen nieuwe gegevens op

Als u de op bestanden gebaseerde conventie opengraph-image.ts gebruikt, genereert Next.js standaard een statische afbeelding tijdens het bouwen. Dynamische inhoud daarin is onderworpen aan dezelfde cachingregels als elke andere servercomponent, dus voeg expliciete hervalidatie toe als deze nieuw moet blijven.

Het is eigenlijk de cache van het platform, niet die van jou

Het meest voorkomende valse alarm. Uw app kan perfect nieuwe metadata weergeven terwijl Facebook, LinkedIn of Slack nog steeds een voorbeeld toont dat ze dagen geleden in de cache hebben opgeslagen. Bevestig wat uw server verzendt voordat u een Next.js-code aanraakt. Zie onze gids voor het wissen van de OG-cache op elk platform.

Stap-voor-stap oplossingsgids

1. Voer curl -s https://yoursite.com/page | uit grep -i "og:" om te zien wat uw server daadwerkelijk verzendt
2. Controleer op een CDN cache HIT header met curl -I https://yoursite.com/page
3. Voeg expliciet revalidate of cache: "no-store" toe om binnen generateMetadata op te halen
4. Forceer een nieuwe implementatie om een ​​verouderde build-cache uit te sluiten
5. Controleer het live resultaat met Proovd

Next.js versus andere raamwerken

Controlelijst voor snelle reparatie

Veelgestelde vragen