Next.js 快取：透過高效的資料獲取來增強您的應用程式

Next.js 中的快取不僅僅是為了節省時間，還在於減少冗餘網路請求、保持資料新鮮並使您的應用程式像搖滾明星一樣運行。
無論您是想將資料快取更長時間還是按需刷新，Next.js 都能為您提供所需的所有工具。在本文中，我們將詳細介紹如何在 Next.js 中有效地使用快取

Next.js 擴充了 fetch API，在快取方面為您提供超能力。使用 cache: 'no-store' 和 cache: 'force-cache' 等簡單的取得選項，您可以輕鬆控制資料快取的時間和方式。

始終保持新鮮快取：'no-store'（相當於unstable_noStore()）

每次都想要新鮮數據嗎？ cache: 'no-store' 是可以使用的。此獲取選項完全跳過快取並在每次請求時獲取最新資料。當您需要即時準確性時，它是完美的選擇 - 不允許昨天提取的剩餘內容。

注意：如果您想跳過伺服器元件上的緩存，也可以使用 unstable_noStore()。語法稍後可能會更改，因此請堅持使用 cache: 'no-store' 以保持穩定性。

透過快取重複使用資料：'force-cache'（相當於unstable_cache()）

另一方面，如果您可以使用快取資料（考慮不經常變更的靜態內容），請使用 cache: 'force-cache'。它將保存回應以供將來使用並跳過冗餘的網路請求。

注意：unstable_cache() 也會快取數據，但如果您要避免將來發生意外，使用穩定的 cache: 'force-cache' 會更可靠。

透過重新驗證保持新鮮感

有時快取的資料需要刷新－無論是在特定時間之後還是由事件觸發時。幸運的是，Next.js 允許您透過多種方式重新驗證快取的資料。

使用時間重新驗證：next.revalidate

如果您的資料需要定期刷新（例如每小時或每天），您可以使用提取請求中的 next.revalidate 選項來設定重新驗證期。它將在您指定的時間後獲取最新數據，同時在其餘時間保留快取內容。

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

帶有標籤的按需重新驗證：revalidateTag()

現在，想像一下，您可以告訴 Next.js 在發生重要事件（例如表單提交或新部落格文章上線）時刷新快取資料的特定位元。您可以為快取的資料指派標籤，然後在需要時重新驗證這些標籤。

這樣，您就可以根據需要手動刷新部分緩存，而無需等待下一次計劃的重新驗證。

使用不穩定的方法

如果您是喜歡冒險的人，您也可以直接在伺服器元件上使用 unstable_noStore() 和 unstable_cache() 方法來管理快取行為。請記住，這些「不穩定」是有原因的，因此它們將來可能會發生變化（或可能在您閱讀時已發生變化）。

或者，如果您熱衷於緩存，請按照以下方式使用unstable_cache()：

跳過支柱鑽孔

這裡有一個巧妙的技巧：如果您要跨多個組件（例如佈局、頁面和一些內部組件）獲取相同的數據，請不要強調在頂部獲取一次並將其向下傳遞或必須在多個組件上多次請求該資料會導致效能下降。 Next.js 在伺服器渲染期間自動記住獲取請求，這意味著如果您多次獲取相同的數據，它足夠智能，只需訪問網路一次並在多個組件中共享結果。

總結一下

Next.js 為您提供有效管理快取所需的所有工具，無論是透過fetch API 選項，例如cache: 'no-store' 和cache: 'force-cache' ，或更具實驗性的unstable_noStore() 和unstable_cache() 方法。加上諸如 next.revalidate 和 revalidateTag 之類的重新驗證策略，您就擁有了保持數據新鮮所需的一切。

來源：
Next.js 快取

以上是Next.js 快取：透過高效的資料獲取來增強您的應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！