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 server-seitige 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 gecacht werden, bis sie manuell invalidert wird.
  // Ähnlich wie `getStaticProps`.
  // `force-cache` ist der Standardwert 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 gecacht 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 gecacht werden, bis sie manuell invalidert wird.
  // Ähnlich wie `getStaticProps`.
  // `force-cache` ist der Standardwert 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 gecacht 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 sie aktuell ist, wird sie aus dem Cache zurückgegeben.
  • Wenn keine Übereinstimmung gefunden wird oder die Übereinstimmung veraltet ist, 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 aktualisiert den Cache nicht mit der heruntergeladenen Ressource.

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 Cache-Lebensdauer einer Ressource (in Sekunden) fest.

• false - Cache die Ressource unbegrenzt. Semantisch äquivalent zu revalidate: Infinity. Der HTTP-Cache kann ältere Ressourcen im Laufe der Zeit entfernen.
• 0 - Verhindert das Caching der Ressource.
• 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.
• Konfligierende 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.

Versionsverlauf