為什麼我的 Next.js API 路由會傳回 Vercel 部署上的快取資料？

Vercel 部署上的Next.js API 路由資料快取問題

在Next.js v13.2 應用程式中，API 端點取得資料在Vercel 上部署後，來自資料庫的資料會遇到奇怪的行為。始終傳回相同的回應，表示存在快取問題。

根本原因：

預設情況下，Next.js 會快取 API 路由和伺服器元件中的所有取得的資料生產。當向 API 路由發出請求時，將提供快取的數據，而不是從資料庫中獲取新數據。

解決方案：

1.使用fetch() 進行每個查詢快取控制

如果使用fetch() API，您可以透過指定重新驗證或快取選項來覆寫預設快取行為：

• revalidate：指定重新取得資料之前的快取持續時間（以秒為單位）。

• cache：明確設定快取行為，選項包括：

  • no-store：完全停用快取。
  • no-cache：在提供回應之前重新驗證快取。
  • 重新載入：始終從伺服器取得新資料。

示例：

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

2.用於通用緩存的路由段配置

如果您不使用fetch() 或需要在路由段層級控制緩存，請使用路由段配置：

• 新增動態段：新增export constdynamic = " 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>

以上是為什麼我的 Next.js API 路由會傳回 Vercel 部署上的快取資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！