fetch

Next.js étend l'API native Web fetch() pour permettre à chaque requête côté serveur de définir sa propre sémantique de mise en cache persistante.

Dans le navigateur, l'option cache indique comment une requête fetch interagira avec le cache HTTP du navigateur. Avec cette extension, cache indique comment une requête fetch côté serveur interagira avec le cache HTTP persistant du framework.

Vous pouvez appeler fetch avec async et await directement dans les composants serveur.

export default async function Page() {
  // Cette requête doit être mise en cache jusqu'à invalidation manuelle.
  // Similaire à `getStaticProps`.
  // `force-cache` est la valeur par défaut et peut être omis.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Cette requête doit être récupérée à nouveau à chaque requête.
  // Similaire à `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Cette requête doit être mise en cache avec une durée de vie de 10 secondes.
  // Similaire à `getStaticProps` avec l'option `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

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

export default async function Page() {
  // Cette requête doit être mise en cache jusqu'à invalidation manuelle.
  // Similaire à `getStaticProps`.
  // `force-cache` est la valeur par défaut et peut être omis.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Cette requête doit être récupérée à nouveau à chaque requête.
  // Similaire à `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Cette requête doit être mise en cache avec une durée de vie de 10 secondes.
  // Similaire à `getStaticProps` avec l'option `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

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

fetch(url, options)

Puisque Next.js étend l'API Web fetch(), vous pouvez utiliser toutes les options natives disponibles.

options.cache

Configure comment la requête doit interagir avec le cache de données (Data Cache) de Next.js.

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

• force-cache (par défaut) - Next.js recherche une requête correspondante dans son cache de données.
  • S'il y a une correspondance et qu'elle est fraîche, elle sera retournée depuis le cache.
  • S'il n'y a pas de correspondance ou une correspondance périmée, Next.js récupérera la ressource depuis le serveur distant et mettra à jour le cache avec la ressource téléchargée.
• no-store - Next.js récupère la ressource depuis le serveur distant à chaque requête sans consulter le cache, et ne mettra pas à jour le cache avec la ressource téléchargée.

Bon à savoir :

• Si vous ne fournissez pas d'option cache, Next.js utilisera force-cache par défaut, sauf si une fonction dynamique comme cookies() est utilisée, auquel cas il utilisera no-store par défaut.
• L'option no-cache se comporte de la même manière que no-store dans Next.js.

options.next.revalidate

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

Définit la durée de vie en cache d'une ressource (en secondes).

• false - Met la ressource en cache indéfiniment. Sémantiquement équivalent à revalidate: Infinity. Le cache HTTP peut supprimer les ressources plus anciennes avec le temps.
• 0 - Empêche la ressource d'être mise en cache.
• number - (en secondes) Spécifie que la ressource doit avoir une durée de vie en cache d'au plus n secondes.

Bon à savoir :

• Si une requête fetch() individuelle définit un revalidate inférieur à la valeur par défaut revalidate d'une route, l'intervalle de revalidation de toute la route sera réduit.
• Si deux requêtes fetch avec la même URL dans la même route ont des valeurs revalidate différentes, la valeur la plus basse sera utilisée.
• Par commodité, il n'est pas nécessaire de définir l'option cache si revalidate est défini sur un nombre, car 0 implique cache: 'no-store' et une valeur positive implique cache: 'force-cache'.
• Des options conflictuelles comme { revalidate: 0, cache: 'force-cache' } ou { revalidate: 10, cache: 'no-store' } provoqueront une erreur.

options.next.tags

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

Définit les étiquettes (tags) de cache d'une ressource. Les données peuvent ensuite être revalidées à la demande en utilisant revalidateTag. La longueur maximale pour une étiquette personnalisée est de 256 caractères et le nombre maximal d'étiquettes est de 128.

Historique des versions