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

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

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

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

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

Next.js 緩存機(jī)制概覽

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

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

1. 請(qǐng)求記憶化（Request Memorization）

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

這種機(jī)制有點(diǎn)像組件渲染期間的“短期記憶”：

• 優(yōu)點(diǎn)：開發(fā)者無(wú)需在組件樹的頂層集中獲取數(shù)據(jù)再通過 props 傳遞?？梢栽谌魏涡枰牡胤秸{(diào)用相同數(shù)據(jù)的獲取函數(shù)，而不用擔(dān)心重復(fù)發(fā)出請(qǐng)求。
• 限制：請(qǐng)求記憶化是 React 特性，必須發(fā)生在 React 組件內(nèi)，而非服務(wù)端 Action 或 Route Handler 中。同時(shí)，需要確保請(qǐng)求本身的 URL 和請(qǐng)求配置完全一致。

示例代碼（借鑒原文）：

// 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(); // 第一次請(qǐng)求，會(huì)真正發(fā)起網(wǎng)絡(luò)請(qǐ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(); // 第二次請(qǐng)求，數(shù)據(jù)將從緩存中讀取，無(wú)需再次網(wǎng)絡(luò)請(qǐng)求
  return (
    <ul>
      {products?.map(({id, title}) => (
        <li key={id}>{title}</li>
      ))}
    </ul>
  );
};

export default ProductList;

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

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

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

特點(diǎn)：

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

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

3. 整頁(yè)路由緩存（Full Route Cache）

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

在實(shí)踐中，F(xiàn)ull Route Cache 與 Data Cache 有關(guān)聯(lián)性——如果數(shù)據(jù)緩存失效，那么對(duì)應(yīng)頁(yè)面的 Full Route Cache 也會(huì)隨之失效，需要重新生成頁(yè)面內(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;

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

4. 路由器緩存（Router Cache）

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

問題與限制：

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

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

緩存失效（Cache Invalidation）

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

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

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

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

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

'use server';

import { revalidateTag } from 'next/cache';

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

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

Next.js 緩存工具

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

next-cache-toolbar

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

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

next-shared-cache

@neshca/cache-handler 則為 Next.js 應(yīng)用提供了一套 ISR/Data Cache 專用的 API，可進(jìn)一步簡(jiǎn)化緩存管理，并支持多種存儲(chǔ)（如 Redis）和按需失效。這對(duì)于需要精細(xì)化緩存控制的應(yīng)用非常實(shí)用。

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

最佳實(shí)踐與常見問題

最佳實(shí)踐：

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

常見問題與解決方案：

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

總結(jié)

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

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