fetch

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

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 de données persistant du framework.

Vous pouvez appeler fetch avec async et await directement dans les Composants Serveur.

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

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 de Next.js.

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

• auto no cache (par défaut) : Next.js récupère la ressource depuis le serveur distant à chaque requête en développement, mais ne la récupérera qu'une seule fois pendant next build car la route sera pré-rendue statiquement. Si des APIs dynamiques sont détectées sur la route, Next.js récupérera la ressource à chaque requête.
• no-store : Next.js récupère la ressource depuis le serveur distant à chaque requête, même si aucune API dynamique n'est détectée sur la route.
• force-cache : 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 si la correspondance est 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.

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 nombre revalidate inférieur à la valeur par défaut de 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.
• Des options conflictuelles comme { revalidate: 3600, cache: 'no-store' } provoqueront une erreur.

options.next.tags

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

Définit les étiquettes 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.

Dépannage

Le comportement par défaut auto no store et cache: 'no-store' de fetch n'affiche pas les données fraîches en développement

Next.js met en cache les réponses fetch dans les Composants Serveur lors du Hot Module Replacement (HMR) en développement local pour des réponses plus rapides et pour réduire les coûts des appels d'API facturés.

Par défaut, le cache HMR s'applique à toutes les requêtes fetch, y compris celles avec l'option par défaut auto no cache et cache: 'no-store'. Cela signifie que les requêtes non mises en cache n'afficheront pas de données fraîches entre les rafraîchissements HMR. Cependant, le cache sera vidé lors d'une navigation ou d'un rechargement complet de la page.

Consultez la documentation de serverComponentsHmrCache pour plus d'informations.

Historique des versions