Comment mettre en cache et revalider les données

La mise en cache (caching) est une technique qui consiste à stocker le résultat de récupération de données et d'autres calculs afin que les requêtes futures pour les mêmes données puissent être servies plus rapidement, sans avoir à refaire le travail. La revalidation vous permet quant à elle de mettre à jour les entrées du cache sans avoir à reconstruire entièrement votre application.

Next.js fournit plusieurs API pour gérer la mise en cache et la revalidation. Ce guide vous expliquera quand et comment les utiliser.

fetch
unstable_cache
revalidatePath
revalidateTag

`fetch`

Par défaut, les requêtes fetch ne sont pas mises en cache. Vous pouvez mettre en cache des requêtes individuelles en définissant l'option cache sur 'force-cache'.

export default async function Page() {
  const data = await fetch('https://...', { cache: 'force-cache' })
}

export default async function Page() {
  const data = await fetch('https://...', { cache: 'force-cache' })
}

Bon à savoir : Bien que les requêtes fetch ne soient pas mises en cache par défaut, Next.js effectuera un prérendu (prerender) des routes contenant des requêtes fetch et mettra en cache le HTML. Si vous souhaitez garantir qu'une route est dynamique, utilisez l'API connection.

Pour revalider les données retournées par une requête fetch, vous pouvez utiliser l'option next.revalidate.

export default async function Page() {
  const data = await fetch('https://...', { next: { revalidate: 3600 } })
}

export default async function Page() {
  const data = await fetch('https://...', { next: { revalidate: 3600 } })
}

Cela revalidera les données après un nombre spécifié de secondes.

Consultez la référence API de fetch pour en savoir plus.

`unstable_cache`

unstable_cache vous permet de mettre en cache le résultat de requêtes de base de données et d'autres fonctions asynchrones. Pour l'utiliser, enveloppez unstable_cache autour de la fonction. Par exemple :

import { db } from '@/lib/db'
export async function getUserById(id: string) {
  return db
    .select()
    .from(users)
    .where(eq(users.id, id))
    .then((res) => res[0])
}

import { db } from '@/lib/db'

export async function getUserById(id) {
  return db
    .select()
    .from(users)
    .where(eq(users.id, id))
    .then((res) => res[0])
}

import { unstable_cache } from 'next/cache'
import { getUserById } from '@/app/lib/data'

export default async function Page({
  params,
}: {
  params: Promise<{ userId: string }>
}) {
  const { userId } = await params

  const getCachedUser = unstable_cache(
    async () => {
      return getUserById(userId)
    },
    [userId] // ajoute l'ID utilisateur à la clé de cache
  )
}

import { unstable_cache } from 'next/cache';
import { getUserById } from '@/app/lib/data';

export default async function Page({ params } }) {
  const { userId } = await params

  const getCachedUser = unstable_cache(
    async () => {
      return getUserById(userId)
    },
    [userId] // ajoute l'ID utilisateur à la clé de cache
  );
}

La fonction accepte un troisième objet optionnel pour définir comment le cache doit être revalidé. Il accepte :

tags : un tableau d'étiquettes (tags) utilisées par Next.js pour revalider le cache.
revalidate : le nombre de secondes après lesquelles le cache doit être revalidé.

const getCachedUser = unstable_cache(
  async () => {
    return getUserById(userId)
  },
  [userId],
  {
    tags: ['user'],
    revalidate: 3600,
  }
)

const getCachedUser = unstable_cache(
  async () => {
    return getUserById(userId)
  },
  [userId],
  {
    tags: ['user'],
    revalidate: 3600,
  }
)

Consultez la référence API de unstable_cache pour en savoir plus.

`revalidateTag`

revalidateTag est utilisé pour revalider des entrées de cache basées sur une étiquette (tag) suite à un événement. Pour l'utiliser avec fetch, commencez par étiqueter la fonction avec l'option next.tags :

export async function getUserById(id: string) {
  const data = await fetch(`https://...`, {
    next: {
      tags: ['user'],
    },
  })
}

export async function getUserById(id) {
  const data = await fetch(`https://...`, {
    next: {
      tags: ['user'],
    },
  })
}

Alternativement, vous pouvez marquer une fonction unstable_cache avec l'option tags :

export const getUserById = unstable_cache(
  async (id: string) => {
    return db.query.users.findFirst({ where: eq(users.id, id) })
  },
  ['user'], // Nécessaire si les variables ne sont pas passées en paramètres
  {
    tags: ['user'],
  }
)

export const getUserById = unstable_cache(
  async (id) => {
    return db.query.users.findFirst({ where: eq(users.id, id) })
  },
  ['user'], // Nécessaire si les variables ne sont pas passées en paramètres
  {
    tags: ['user'],
  }
)

Puis, appelez revalidateTag dans un Route Handler ou une Server Action :

import { revalidateTag } from 'next/cache'

export async function updateUser(id: string) {
  // Modifier les données
  revalidateTag('user')
}

import { revalidateTag } from 'next/cache'

export async function updateUser(id) {
  // Modifier les données
  revalidateTag('user')
}

Vous pouvez réutiliser la même étiquette dans plusieurs fonctions pour toutes les revalider en une seule fois.

Consultez la référence API de revalidateTag pour en savoir plus.

`revalidatePath`

revalidatePath est utilisé pour revalider une route suite à un événement. Pour l'utiliser, appelez-le dans un Route Handler ou une Server Action :

import { revalidatePath } from 'next/cache'

export async function updateUser(id: string) {
  // Modifier les données
  revalidatePath('/profile')

import { revalidatePath } from 'next/cache'

export async function updateUser(id) {
  // Modifier les données
  revalidatePath('/profile')

Consultez la référence API de revalidatePath pour en savoir plus.

Comment mettre en cache et revalider les données

fetch

unstable_cache

revalidateTag

revalidatePath