Introduction

Un problème de mise en cache courant dans Next.js lors de la création d'une application est le comportement de mise en cache par défaut de Next.js qui conduit à la frustration de nombreux développeurs. Dans de nombreux cas, la mise en cache contribue à accélérer le chargement des pages et à réduire la charge du serveur en stockant des copies des ressources.
Cependant, cela peut parfois conduire à l'affichage d'un contenu obsolète, ce qui peut être problématique pour les applications dynamiques telles que le flux de blog où un nouveau blog s'affiche lorsqu'il est ajouté.

Désactivation de la mise en cache des données

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

Pour désactiver la mise en cache pour les demandes de récupération individuelles, vous pouvez définir l'option de cache dans la récupération sur « no-store ». Cela récupérera les données de manière dynamique, à chaque demande.

export default async function Page() {

  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
  const data = await dynamicData.json()
}

Cela aidera à remplacer le comportement de mise en cache par défaut de Next.js