首頁  >  文章  >  web前端  >  為什麼我的 Next.js API 路由會傳回 Vercel 部署上的快取資料?

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

Barbara Streisand
Barbara Streisand原創
2024-11-02 21:11:30687瀏覽

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

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn