Vercel デプロイメントで Next.js API ルートがキャッシュされたデータを返すのはなぜですか?

Vercel デプロイメントでの Next.js API ルート データ キャッシュの問題

Next.js v13.2 アプリケーションで、API エンドポイントがデータを取得するデータベースからのファイルは、Vercel に展開した後に特有の動作が発生します。同じ応答が一貫して返され、キャッシュの問題を示唆しています。

根本原因:

デフォルトでは、Next.js は API ルートとサーバー コンポーネントでフェッチされたすべてのデータをキャッシュします。生産。 API ルートに対してリクエストが行われると、データベースから新しいデータを取得する代わりに、キャッシュされたデータが提供されます。

解決策:

1. fetch() によるクエリごとのキャッシュ制御

fetch() API を使用する場合、再検証またはキャッシュ オプションを指定することでデフォルトのキャッシュ動作をオーバーライドできます:

• revalidate: データを再フェッチするまでのキャッシュ期間を秒単位で指定します。

• cache: キャッシュの動作を明示的に設定します。オプションは次のとおりです。

  • no-store: キャッシュを完全に無効にします。
  • no-cache: 応答を提供する前にキャッシュを再検証します。
  • reload: サーバーから常に新しいデータを取得します。

例:

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

2.一般化されたキャッシュ用のルート セグメント設定

fetch() を使用していない場合、またはルート セグメント レベルでキャッシュを制御する必要がある場合は、ルート セグメント設定を使用します:

• DYNAMIC SEGMENT の追加: エクスポート const Dynamic = "force-dynamic"; を追加します。レイアウト、ページ、またはルート ファイルにコピーします。これにより、そのセグメントのキャッシュ動作が無効になります。

例:

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

以上がVercel デプロイメントで Next.js API ルートがキャッシュされたデータを返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。