Next.js 13.2 API エンドポイントでのキャッシュの問題を回避するにはどうすればよいですか?

Next.js 13.2 API エンドポイントのデータ キャッシュの問題を解決する方法

データを取得する API エンドポイントを使用して Next.js アプリケーションをデプロイする場合外部ソースからの場合、開発者は、基礎となるデータ ソースに加えられた変更に関係なく、キャッシュされたデータが一貫して表示されるという問題に遭遇する可能性があります。この動作は、本番環境の API ルートとサーバー コンポーネントに対する Next.js のキャッシュ メカニズムが原因である可能性があります。

このキャッシュの問題を解決するために、Next.js はキャッシュ動作を制御するためのオプションをいくつか提供しています。

Revalidate または Cache オプションを指定した Fetch() の使用

データのフェッチに fetch() を使用する場合、開発者は、Revalidate または Cache オプションを指定して、クエリごとのキャッシュ動作を制御できます:

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

再検証オプションは、キャッシュが再フェッチされるまでの秒数を指定します。キャッシュ オプションを使用すると、ブラウザが応答をキャッシュしないようにする no-store などの値を使用して、より詳細な制御が可能になります。

カスタム キャッシュ ルールにルート セグメント構成を使用する

fetch() がカスタム キャッシュ ルールで使用される場合、または axios などのライブラリを使用する場合、またはデータベースと直接対話する場合、開発者は Route Segment Config を使用できます。 Route Segment Config を使用すると、ルートごとにキャッシュ動作を定義できます。

<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>

dynamic を "force-dynamic" に設定することで、Next.js は指定されたルートのキャッシュを無効にします。開発者は、Next.js ドキュメントに記載されているように、特定のキャッシュ要件に基づいて追加のオプションを検討できます。

以上がNext.js 13.2 API エンドポイントでのキャッシュの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。