Next.js Metatiedot eivät päivity? Tässä on miksi

Päivität generateMetadata, asennat uudelleen ja vanha otsikko tai kuva näkyy edelleen, kun jaat linkin. Näin voit selvittää, onko kyseessä välimuistitaso vai koodivirhe.

Toistettava esimerkki

Tämä näyttää oikealta, mutta jatkaa vanhentuneiden metatietojen näyttämistä sisällön muutoksen jälkeen:

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

fetch-kutsu tässä välimuistissa on Next.js:n datavälimuisti oletusarvoisesti. Jos post.title tai post.image muuttuu kohdassa CMS, tämä toiminto ei näe uutta arvoa ennen kuin välimuisti on tarkistettu. Ilman nimenomaista strategiaa se voi tarkoittaa vasta seuraavaa täyttä versiota.

Miksi metatietosi eivät päivity

Taustalla oleva haku on välimuistissa

Oletusarvoisesti fetch(), joka sijaitsee tunnuksen generateMetadata sisällä, on välimuistissa rajoituksetta App Routerissa. Korjaa asettamalla eksplisiittinen vahvistusikkuna:

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

Tai lopeta välimuistin tallentaminen kokonaan kyseiselle pyynnölle:

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

Reitti luodaan staattisesti

Jos reitti käyttää parametria generateStaticParams ilman uudelleenvalidointia, koko reitti metatiedot mukaan lukien luodaan rakennusvaiheessa. export const revalidate = 3600; lisääminen sivutasolle pakottaa säännöllisen uudelleenmuodostuksen.

CDN tai reunavälimuisti palvelee vanhaa HTML-koodia

Vaikka koontiversiosi olisi oikea, Vercel's Edge Network, Cloudflare tai jokin muu CDN sovelluksesi edessä voi näyttää välimuistissa olevan HTML-vastauksen, joka on ennen korjaustasi. Tarkista vastausotsikot:

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

Etsi x-vercel-cache: HIT tai vastaava CDN-otsikko. HIT tarkoittaa, että katsot välimuistissa olevaa kopiota, et viimeisintä käyttöönottoasi.

opengraph-image.ts ei poimi uutta tietoa

Jos käytät tiedostopohjaista käytäntöä opengraph-image.ts, Next.js luo oletuksena staattisen kuvan rakennusaikana. Sen sisällä olevaan dynaamiseen sisältöön sovelletaan samoja välimuistisääntöjä kuin mihin tahansa muuhun palvelinkomponenttiin, joten lisää nimenomainen uudelleentarkistus, jos sen on pysyttävä tuoreena.

Se on itse asiassa alustan välimuisti, ei sinun

Yleisin väärä hälytys. Sovelluksesi voi näyttää täysin tuoreita metatietoja, kun Facebook, LinkedIn tai Slack näyttävät edelleen esikatselun, jonka ne ovat tallentaneet välimuistiin päiviä sitten. Varmista, mitä palvelimesi lähettää, ennen kuin kosketat mitään Next.js-koodia. Katso opas OG-välimuistin tyhjentämiseen kaikilla alustoilla.

Vaiheittainen korjausopas

1. Suorita curl -s https://yoursite.com/page | grep -i "og:" nähdäksesi, mitä palvelimesi todella lähettää
2. Tarkista CDN välimuisti HIT otsikko curl -I https://yoursite.com/page
3. Lisää eksplisiittinen revalidate tai cache: "no-store" hauille generateMetadata
4. Pakota uusi käyttöönotto sulkeaksesi pois vanhentuneen koontivälimuistin
5. Vahvista reaaliaikainen tulos käyttämällä Proovd

Next.js vs. muut kehykset

Pikakorjauksen tarkistuslista

Usein kysytyt kysymykset