Pourquoi ma route API Next.js renvoie-t-elle des données mises en cache lors du déploiement de Vercel ?

Problème de cache de données de route de l'API Next.js lors du déploiement de Vercel

Dans une application Next.js v13.2, un point de terminaison d'API récupérant des données à partir d'une base de données rencontre un comportement particulier après déploiement sur Vercel. La même réponse est systématiquement renvoyée, suggérant un problème de mise en cache.

Cause première :

Par défaut, Next.js met en cache toutes les données récupérées dans les routes API et les composants serveur sur production. Lorsqu'une requête est adressée à la route API, les données mises en cache sont servies au lieu de récupérer de nouvelles données de la base de données.

Solutions :

1. Contrôle du cache par requête avec fetch()

Si vous utilisez l'API fetch(), vous pouvez remplacer le comportement de mise en cache par défaut en spécifiant les options de revalidation ou de cache :

• revalidate : spécifie la durée du cache en secondes avant de récupérer les données.

• cache : définit explicitement le comportement du cache, les options incluent :

  • no-store : désactive entièrement la mise en cache.
  • no-cache : revalide le cache avant de servir la réponse.
  • reload : récupère toujours les nouvelles données du serveur.

Exemple :

<code class="js">fetch('https://...', { next: { revalidate: 10 } });
// OR
fetch('https://...', { cache: 'no-store' });</code>

2. Configuration du segment de route pour la mise en cache généralisée

Si vous n'utilisez pas fetch() ou si vous devez contrôler la mise en cache au niveau du segment de route, utilisez la configuration du segment de route :

• Ajouter un SEGMENT DYNAMIQUE : Ajouter export constdynamic = "force-dynamic" ; à votre mise en page, page ou fichier d'itinéraire. Cela désactive le comportement du cache pour ce segment.

Exemple :

<code class="js">// layout.js OR page.js OR route.js

import prisma from "./lib/prisma";

export const dynamic = "force-dynamic";

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!