fetch

Next.js erweitert die native Web fetch()-API, um jeder Server-Anfrage zu ermöglichen, ihre eigenen persistenten Caching-Semantiken festzulegen.

Im Browser gibt die cache-Option an, wie eine Fetch-Anfrage mit dem Browser-HTTP-Cache interagiert. Mit dieser Erweiterung gibt cache an, wie eine serverseitige Fetch-Anfrage mit dem persistenten HTTP-Cache des Frameworks interagiert.

Sie können fetch mit async und await direkt in Server-Komponenten aufrufen.

export default async function Page() {
  // Diese Anfrage sollte zwischengespeichert werden, bis sie manuell ungültig gemacht wird.
  // Ähnlich wie `getStaticProps`.
  // `force-cache` ist die Standardeinstellung und kann weggelassen werden.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Diese Anfrage sollte bei jeder Anfrage neu abgerufen werden.
  // Ähnlich wie `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Diese Anfrage sollte mit einer Lebensdauer von 10 Sekunden zwischengespeichert werden.
  // Ähnlich wie `getStaticProps` mit der `revalidate`-Option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

export default async function Page() {
  // Diese Anfrage sollte zwischengespeichert werden, bis sie manuell ungültig gemacht wird.
  // Ähnlich wie `getStaticProps`.
  // `force-cache` ist die Standardeinstellung und kann weggelassen werden.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Diese Anfrage sollte bei jeder Anfrage neu abgerufen werden.
  // Ähnlich wie `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Diese Anfrage sollte mit einer Lebensdauer von 10 Sekunden zwischengespeichert werden.
  // Ähnlich wie `getStaticProps` mit der `revalidate`-Option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

fetch(url, options)

Da Next.js die Web fetch()-API erweitert, können Sie alle verfügbaren nativen Optionen verwenden.

options.cache

Konfiguriert, wie die Anfrage mit dem Data Cache von Next.js interagieren soll.

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

• force-cache (Standard) - Next.js sucht nach einer passenden Anfrage in seinem Data Cache.
  • Wenn eine Übereinstimmung gefunden wird und diese aktuell ist, wird sie aus dem Cache zurückgegeben.
  • Wenn keine Übereinstimmung oder eine veraltete Übereinstimmung gefunden wird, ruft Next.js die Ressource vom entfernten Server ab und aktualisiert den Cache mit der heruntergeladenen Ressource.
• no-store - Next.js ruft die Ressource bei jeder Anfrage vom entfernten Server ab, ohne im Cache nachzuschauen, und wird den Cache nicht mit der heruntergeladenen Ressource aktualisieren.

Wissenswert:

• Wenn Sie keine cache-Option angeben, verwendet Next.js standardmäßig force-cache, es sei denn, eine dynamische Funktion wie cookies() wird verwendet, in diesem Fall wird standardmäßig no-store verwendet.
• Die Option no-cache verhält sich in Next.js genauso wie no-store.

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

Legt die Lebensdauer einer Ressource im Cache fest (in Sekunden).

• false - Die Ressource wird unbegrenzt zwischengespeichert. Semantisch äquivalent zu revalidate: Infinity. Der HTTP-Cache kann ältere Ressourcen im Laufe der Zeit entfernen.
• 0 - Verhindert, dass die Ressource zwischengespeichert wird.
• number - (in Sekunden) Gibt an, dass die Ressource eine maximale Cache-Lebensdauer von n Sekunden haben soll.

Wissenswert:

• Wenn eine individuelle fetch()-Anfrage einen revalidate-Wert festlegt, der niedriger ist als die standardmäßige revalidate einer Route, wird das gesamte Revalidierungsintervall der Route verringert.
• Wenn zwei Fetch-Anfragen mit derselben URL in derselben Route unterschiedliche revalidate-Werte haben, wird der niedrigere Wert verwendet.
• Der Einfachheit halber ist es nicht notwendig, die cache-Option zu setzen, wenn revalidate auf eine Zahl gesetzt ist, da 0 cache: 'no-store' impliziert und ein positiver Wert cache: 'force-cache' impliziert.
• Konfliktierende Optionen wie { revalidate: 0, cache: 'force-cache' } oder { revalidate: 10, cache: 'no-store' } führen zu einem Fehler.

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

Legt die Cache-Tags einer Ressource fest. Daten können dann bedarfsgesteuert mit revalidateTag revalidiert werden. Die maximale Länge für einen benutzerdefinierten Tag beträgt 256 Zeichen und die maximale Anzahl an Tags ist 128.

Versionsverlauf