Comment éviter les problèmes de mise en cache dans les points de terminaison de l'API Next.js 13.2 ?

Comment résoudre le problème de mise en cache des données dans les points de terminaison de l'API Next.js 13.2

Lors du déploiement d'applications Next.js avec des points de terminaison d'API qui récupèrent des données à partir de sources externes, les développeurs peuvent rencontrer un problème où les données mises en cache s'affichent de manière cohérente, quelles que soient les modifications apportées à la source de données sous-jacente. Ce comportement peut être attribué au mécanisme de mise en cache de Next.js pour les routes API et les composants de serveur dans les environnements de production.

Pour résoudre ce problème de mise en cache, Next.js propose plusieurs options pour contrôler le comportement de mise en cache.

Utilisation de Fetch() avec les options de revalidation ou de cache

Si vous utilisez fetch() pour la récupération de données, les développeurs peuvent spécifier les options de revalidation ou de cache pour contrôler le comportement de mise en cache par requête :

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

L'option de revalidation spécifie le nombre de secondes avant la récupération du cache. L'option de cache permet un contrôle plus granulaire, avec des valeurs telles que no-store empêchant le navigateur de mettre en cache la réponse.

Utilisation de la configuration du segment de route pour les règles de mise en cache personnalisées

Dans les cas où fetch() est utilisé avec des règles de mise en cache personnalisées ou lors de l'utilisation de bibliothèques comme axios ou d'une interaction directe avec une base de données, les développeurs peuvent utiliser Route Segment Config. Route Segment Config permet de définir le comportement de mise en cache pour chaque itinéraire :

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

import prisma from "./lib/prisma";

/*
  Bleow option is when you want no caching at all, there are more options
  on the doc depending on your needs. 
*/
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>

En définissant Dynamic sur "force-dynamic", Next.js désactive la mise en cache pour l'itinéraire spécifié. Les développeurs peuvent explorer des options supplémentaires en fonction de leurs exigences spécifiques en matière de mise en cache, comme indiqué dans la documentation Next.js.

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!