Next.js 16 Cache Components 備忘錄

大約半年前，Next.js 16 已於 2025年10月21日正式發布。

Cache Components 這個概念本身是從 Next.js 16 開始導入的，讓開發者可以明確地控制快取。

只有寫了 use cache 指令的地方會被快取，此外還可以搭配 <Sunpense>，以元件為單位進行快取。

既然有這篇文章的機會，本次將以 Next.js 16 的「Cache Components」使用方式為中心，同時整理成備忘錄！

Next.js App Router 的四種快取

Next.js App Router 的快取類型分為以下四種模式。

Request Memoization： 指重複請求的去除。即使不同元件呼叫相同的 fetch，實際執行也只會進行一次。這是 Next.js 自動提供的功能。
Data Cache：用於透過 fetch 選項控制快取的實作。
Full Route Cache： 以頁面為單位的快取，適用於靜態渲染（SSG、ISR）。在伺服器端同時快取 RSC payload 與 HTML。
Router Cache： 在客戶端記憶體中暫時快取「僅 RSC payload」的機制。使用 Next.js 的元件時即會運作。

Next.js 16 的新功能 `"use cache"`

關於新功能 Cache Components 現在能做到的事情。

透過 use cache 讓快取設定更簡潔。只有撰寫 use cache 的位置會被快取，快取也能明確控制。
以 <Suspense>包住元件即可將元件分離，並能以元件為單位指定快取。

在 Next.js 15 以前，fetch 預設會被快取，因此很難分辨哪些內容被快取、哪些沒有，容易發生non預期的快取情況。

由於預設會自動快取，若要停用快取，必須額外加上 fetch(URL, { cache: 'no-store' })。

另一方面，Next.js 16 改為只有在需要快取時才指定 use cache，做法明確且更加簡潔。

此外，過去只能透過 fetch 來使用 Next.js 的 Data Cache，現在也能直接對資料庫查詢等不使用 fetch 的非同步函式套用快取。

實作方式

請在 next.config.js 檔案中啟用 Cache Components。

完成此設定後，即可使用 Cache Components 的功能！

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

在要快取的元件最前面加上 use cache 指令。若只想快取特定函式，則將指令寫在該函式內部。

'use cache'

async function getPosts() {
  const res = await fetch('<https://api.example.com/posts>')
  return res.json()
}

export default async function PostList() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  )
}

對 fetch 函式不加上 use cache 會怎樣？

Next.js 16 起若要使用快取，需要加上 use cache，但如果 use cache 和 cache 選項都不加，會怎樣？

當設定 cacheComponents: true 時會發生錯誤。若要刻意停用快取，請勿使用 fetch(url, { cache: 'no-store' })，只需以 <Suspense>包覆即可！（cacheComponents: false（預設值）時，仍可依照以往方式使用 no-store。）

函式層級的快取

過去只能以頁面為單位指定快取，但透過 use cache、，現在也能設定元件與函式層級的快取。

這樣做的好處在於，同一頁面內可以混合使用靜態渲染與動態渲染，兼顧靜態內容的高速傳送與動態內容的共存，大幅提升初始載入速度與 UX。（PPR 為一種渲染方式）

Suspense

它的作用是讓頁面的各個部分可以獨立處理，與頁面其他部分分開運作。<Suspense>

只要以<Suspense>包住，就能將元件分離，因此若想以元件為單位進行快取，請在被包住的元件內部進行指定。

關於渲染

渲染方式由快取設定決定。

「這個頁面或資料想要如何呈現？」（例如更新頻率等）

↓

決定渲染方式（SSG / ISR / SSR / PPR / CSR）

↓

並據此設定對應的快取

這種思考方式。

渲染方式也有幾種模式，但這次就先省略囉！

舉例來說，

若是「從 microCMS 取得資料並顯示部落格文章的動態路由頁面」的情況

↓

渲染方式以 SSG 或 ISR 最為適合（因為文章內容不常更新）

↓

若適合使用快取，則新增 use cache

就能以這樣的方式實作。

順帶一提，若未在 next.config.js 檔案中將 Cache Components 設為 true，仍可沿用傳統的 fetch cache 選項。

總結

在思考快取設定時，重要的是實作流程：先想清楚「這份資料、這個頁面希望如何呈現？」，再依照該頁面找出最佳的效能方案。

一旦答案確定，是否使用 use cache 也會自然而然地決定。

許多人會將快取、渲染方式和資料擷取分開理解，但我覺得這些其實是環環相扣的，感覺非常順暢！

重要的是將它們視為一條連貫的流程，而不是彼此獨立的概念！！

Next.js App Router 的四種快取

Next.js 16 的新功能 `"use cache"`