數據緩存的使用

在 fetch 函數中，新增了一個名為 cache 的可選參數，用于控制數據緩存行為。其中，force-cache 是服務器組件中的默認值。

// 'force-cache' 是默認值，可以省略
fetch('https://...', { cache: 'force-cache' })

如果希望避免緩存數據，可以將 cache 參數設置為 no-store，確保每次重新加載頁面時都能獲取最新數據。

fetch('https://...', { cache: 'no-store' })

通過這種方式，開發者可以靈活地控制數據的緩存策略，從而滿足不同場景的需求。

數據重新驗證

重新驗證功能類似于以往的增量靜態生成（Incremental Static Regeneration）。通過設置一個以秒為單位的時間間隔，緩存數據將在指定的時間內保持有效，并在頁面刷新時自動更新數據。這對于動態數據的管理場景非常有用。

以下是一個示例，展示如何設置重新驗證時間為每小時刷新一次：

// 每小時重新驗證一次
fetch('https://...', { next: { revalidate: 3600 } })

這種機制不僅可以提高頁面加載速度，還能確保數據的實時性，為用戶提供更好的體驗。

總結

本文探討了 Next.js 中的數據緩存機制及其在提升性能和用戶體驗方面的重要作用。我們詳細介紹了服務器組件中的默認緩存行為，以及如何通過 fetch 函數的參數設置來實現數據緩存和重新驗證。

通過合理地使用這些技術，開發者可以顯著提升頁面加載速度，并為用戶提供更加流暢的交互體驗。無論是靜態數據還是動態數據場景，這些功能都能為開發者提供強大的支持。

原文鏈接: https://imhardikdesai.medium.com/next-js-14-efficient-data-fetching-with-fetch-api-caching-2f917750ece1