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

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

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

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

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

Next.js 緩存機制概覽

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

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

1. 請求記憶化（Request Memorization）

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

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

• 優(yōu)點：開發(fā)者無需在組件樹的頂層集中獲取數(shù)據(jù)再通過 props 傳遞?？梢栽谌魏涡枰牡胤秸{(diào)用相同數(shù)據(jù)的獲取函數(shù)，而不用擔心重復發(fā)出請求。
• 限制：請求記憶化是 React 特性，必須發(fā)生在 React 組件內(nèi)，而非服務端 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(); // 第一次請求，會真正發(fā)起網(wǎng)絡請求
  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(); // 第二次請求，數(shù)據(jù)將從緩存中讀取，無需再次網(wǎng)絡請求
  return (
    <ul>
      {products?.map(({id, title}) => (
        <li key={id}>{title}</li>
      ))}
    </ul>
  );
};

export default ProductList;

上述代碼中，第一個 getProducts() 發(fā)起真實請求并緩存數(shù)據(jù)；當 ProductList 再次調(diào)用 getProducts() 時，就直接使用緩存結(jié)果了。

2. 數(shù)據(jù)緩存（Data Cache）

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

特點：

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

數(shù)據(jù)緩存能減少多次對同一資源的網(wǎng)絡請求，提升應用響應速度。

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

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

在實踐中，F(xiàn)ull Route Cache 與 Data Cache 有關(guān)聯(lián)性——如果數(shù)據(jù)緩存失效，那么對應頁面的 Full Route Cache 也會隨之失效，需要重新生成頁面內(nèi)容。

示例：

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

如果該頁面在構(gòu)建時生成靜態(tài)文件，那么整頁內(nèi)容將被緩存。當數(shù)據(jù)通過 ISR 更新時，頁面也將被重新生成。

4. 路由器緩存（Router Cache）

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

問題與限制：

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

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

緩存失效（Cache Invalidation）

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

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

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

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

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

'use server';

import { revalidateTag } from 'next/cache';

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

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

Next.js 緩存工具

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

next-cache-toolbar

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

簡單配置步驟包括安裝 npm 包、在 App Router 下創(chuàng)建相應文件，然后在開發(fā)模式下運行。只在開發(fā)環(huán)境中可見，可確保生產(chǎn)環(huán)境不受影響。

next-shared-cache

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

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

最佳實踐與常見問題

最佳實踐：

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

常見問題與解決方案：

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

總結(jié)

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

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