在 Next.js 中，緩存機制往往是被詬病最多的特性之一。許多開發者對其工作方式并不滿意。雖然緩存對提升 React 應用的性能至關重要，但如果對其原理不夠理解，很容易導致棘手的錯誤。例如，頁面在客戶端顯示陳舊數據的問題可能讓你在調試時痛苦不堪。

對 Next.js 緩存機制缺乏深入理解，就會讓你不斷遭遇意料之外的行為和 Bug，每次都在不必要的細節中掙扎。結果就是無法充分利用這個強大的框架來優化和加速你的 React 應用，讓項目進度陷入僵局。

本文將深入探討 Next.js 的四種緩存機制，并詳細說明如何有效控制它們：

1. 請求記憶化（Request Memorization）
2. 數據緩存（Data Cache）
3. 整頁路由緩存（Full Route Cache）
4. 路由器緩存（Router Cache）

此外，我們還會討論緩存失效（Cache Invalidation）策略、介紹一些 Next.js 緩存工具以及優化實踐，以確保你在生產環境中更加得心應手。

Next.js 緩存機制概覽

在 Next.js 中，“緩存”指的是將已經獲取或計算過的數據暫存起來，以便后續重用。這樣可以避免每次都重新請求數據或重復計算，有助于大幅提升應用性能。但需要注意的是，Next.js 對緩存非常“激進”：它會盡可能緩存所有內容，包括已獲取的數據、訪問過的路由等等。

Next.js 中有四種層次或階段的緩存機制，每種在應用的不同層面發揮作用。

1. 請求記憶化（Request Memorization）

請求記憶化發生在服務器端，它會在單次請求（Request Lifespan）中對相同的 GET 請求結果進行緩存。在同一次頁面渲染過程中，如果在組件樹的不同地方多次請求同一接口，實際上只會發送一次真實的網絡請求，其余調用都會使用已經緩存的數據。

這種機制有點像組件渲染期間的“短期記憶”：

• 優點：開發者無需在組件樹的頂層集中獲取數據再通過 props 傳遞?？梢栽谌魏涡枰牡胤秸{用相同數據的獲取函數，而不用擔心重復發出請求。
• 限制：請求記憶化是 React 特性，必須發生在 React 組件內，而非服務端 Action 或 Route Handler 中。同時，需要確保請求本身的 URL 和請求配置完全一致。

示例代碼（借鑒原文）：

// lib/products.js
export const getProducts = async () => {
  const res = await fetch('https://mystoreapi.com/products');
  return res.json();
};

// app/product/page.jsx
import { getProducts } from '../../../lib/products';
import ProductList from '../productList/page';

const Product = async () => {
  const products = await getProducts(); // 第一次請求，會真正發起網絡請求
  const totalProducts = products?.length;

  return (
    <div>
      <div>{`There are ${totalProducts} products in the store.`}</div>
      <ProductList />
    </div>
  );
};

export default Product;

// app/product/productList/page.jsx
import { getProducts } from '../../../lib/products';

const ProductList = async () => {
  const products = await getProducts(); // 第二次請求，數據將從緩存中讀取，無需再次網絡請求
  return (
    <ul>
      {products?.map(({id, title}) => (
        <li key={id}>{title}</li>
      ))}
    </ul>
  );
};

export default ProductList;

上述代碼中，第一個 getProducts() 發起真實請求并緩存數據；當 ProductList 再次調用 getProducts() 時，就直接使用緩存結果了。

2. 數據緩存（Data Cache）

數據緩存是在單個路由或某一條數據請求層面進行的緩存，這類緩存的數據會長期有效，直至開發者主動觸發重新驗證（Revalidate）或者增量靜態再生成（ISR）來更新。

特點：

• 緩存的數據可跨多用戶請求復用，并在應用重新部署后仍有效。
• 適合用于靜態內容、重用頻率高且不經常變化的數據，比如產品列表、博客文章等。
• 配合 ISR 使用時，通過定期 Revalidate 來自動更新數據緩存。

數據緩存能減少多次對同一資源的網絡請求，提升應用響應速度。

3. 整頁路由緩存（Full Route Cache）

整頁路由緩存是將整個頁面（包含 HTML 和 RSC Payload）在構建時緩存起來。靜態頁面只需構建一次，然后就可以多次為用戶提供相同頁面的數據。這種緩存方式能帶來接近純靜態文件的加載速度。

在實踐中，Full Route Cache 與 Data Cache 有關聯性——如果數據緩存失效，那么對應頁面的 Full Route Cache 也會隨之失效，需要重新生成頁面內容。

示例：

// app/blog/page.jsx
import { getProducts } from '../../../lib/products'; 

const Product = async () => {
  const products = await getProducts();
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(({id, title}) => (
          <li key={id}>{title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Product;

如果該頁面在構建時生成靜態文件，那么整頁內容將被緩存。當數據通過 ISR 更新時，頁面也將被重新生成。

4. 路由器緩存（Router Cache）

路由器緩存指在瀏覽器中對用戶訪問過的頁面或預取過的頁面進行緩存，以實現無縫、幾乎即時的頁面切換，提供類單頁應用（SPA）的交互體驗。

問題與限制：

• 路由器緩存可能會導致頁面顯示過期數據，因為它不會主動從服務器重新獲取。
• 動態頁面在路由器緩存中的存活時間約為 30 秒，靜態頁面約為 5 分鐘，超出時間后才可能再請求數據。
• 除非用戶手動刷新頁面或關閉再重新打開瀏覽器標簽頁，否則不會觸發緩存失效。

這種緩存機制的最大缺陷就是可能展示不夠新鮮的數據。

緩存失效（Cache Invalidation）

緩存失效是指在數據過期時清除舊數據，再重新從數據源獲取最新信息的過程。合理的緩存失效策略，能保證用戶看到的數據是最新的，同時避免無意義的頻繁請求。

以下是一些常見的緩存失效策略：

• 基于時間的失效：與 ISR 一起使用，在指定時間間隔后自動重新驗證數據。如果數據過期，會自動觸發重構頁面或重新獲取數據。

// app/page.jsx
export const revalidate = 3600; // 每3600秒(1小時)重新驗證

• 手動失效（On-Demand Invalidation）：在服務器 Action 中使用 revalidatePath 或 revalidateTag 主動觸發緩存失效。例如，當后臺更新了產品信息時，可以調用 revalidateTag('products') 來使得所有使用 “products” 標簽的數據緩存失效。

'use server';

import { revalidateTag } from 'next/cache';

export const updateProducts = async () => {
  // 更新數據邏輯
  revalidateTag('products');
};

通過這種方式，所有依賴 products 標簽的數據緩存都會被刷新，從而確保用戶獲得最新數據。

Next.js 緩存工具

管理與調試緩存并不總是直觀的，幸運的是，有一些工具能幫助觀察和控制緩存行為。

next-cache-toolbar

next-cache-toolbar 能在開發環境中直觀顯示頁面緩存信息。它會以工具欄的形式呈現緩存狀態、數據過期時間等信息。通過這種可視化方式，開發者可輕松找出緩存命中/未命中（Cache Hit/Miss）的問題點。

簡單配置步驟包括安裝 npm 包、在 App Router 下創建相應文件，然后在開發模式下運行。只在開發環境中可見，可確保生產環境不受影響。

next-shared-cache

@neshca/cache-handler 則為 Next.js 應用提供了一套 ISR/Data Cache 專用的 API，可進一步簡化緩存管理，并支持多種存儲（如 Redis）和按需失效。這對于需要精細化緩存控制的應用非常實用。

安裝后通過在 next.config.js 中進行相應配置，并使用 instrumentation 文件在構建時預填緩存，從而在生產環境中獲得可控且靈活的緩存管理能力。

最佳實踐與常見問題

最佳實踐：

• 對敏感數據慎用緩存，避免潛在安全風險。
• 根據數據特性設定合適的 Cache-Control 頭。
• 對動態頻繁更新的數據及時重驗證，以確保用戶始終看到最新信息。
• 使用工具（如 next-cache-toolbar）定期監控緩存命中率和性能指標。

常見問題與解決方案：

• 緩存未命中（Cache Miss）：可通過調整 revalidate 時間或 cache-control 頭，確保適當的緩存時長。
• 陳舊數據（Stale Data）：設置適當的 Revalidate 時間或手動觸發緩存失效，確保頁面及時更新。
• 過度緩存（Over-Caching）：謹慎選擇需要緩存的內容，對頻繁變化的數據縮短緩存周期。

總結

深入理解 Next.js 的緩存機制是高效使用該框架的關鍵。通過合理運用請求記憶化、數據緩存、整頁路由緩存、路由器緩存四種機制，并結合合適的緩存失效策略和工具，你可以顯著提升應用的性能與用戶體驗。

在實際項目中，根據需求選擇與組合這些策略，充分發揮緩存的威力，同時保持數據的新鮮度與安全性。通過多加練習與調試，不僅能讓你的 React 應用更快，還能讓你在開發與維護中游刃有余。