如何避免 Next.js 13.2 API 端點中的快取問題？

如何解決Next.js 13.2 API 端點中的資料快取問題

使用檢索資料的API 端點問題

使用檢索資料的API 端點問題

使用檢索資料的API 端點問題。從外部來源來看，開發人員可能會遇到這樣的問題：無論底層資料來源如何更改，快取的資料都會顯示一致。此行為可歸因於生產環境中 Next.js 對 API 路由和伺服器元件的快取機制。

為了解決此快取問題，Next.js 提供了多個控制快取行為的選項。

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

將Fetch() 與Revalidate 或Cache 選項結合使用

如果使用fetch() 進行資料獲取，開發人員可以指定revalidate 或快取選項來控制每個查詢的快取行為：

revalidate 選項指定重新取得快取之前的秒數。快取選項允許更精細的控制，例如 no-store 等值會阻止瀏覽器快取回應。

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

使用自訂快取規則的路由段配置

對於fetch() 與自訂快取規則一起使用的情況，或使用axios 等函式庫或直接與資料庫互動時，開發人員可以使用Route Segment Config。路由段配置允許在每個路由的基礎上定義快取行為：透過將動態設定為“force-dynamic”，Next.js 停用指定路由的快取。開發人員可以根據其特定的快取要求探索其他選項，如 Next.js 文件中所述。

以上是如何避免 Next.js 13.2 API 端點中的快取問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！