Maison > interface Web > js tutoriel > le corps du texte

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

Barbara Streisand
Libérer: 2024-11-02 21:11:30
original
775 Les gens l'ont consulté

Why is my Next.js API Route returning cached data on Vercel deployment?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal