Next.js 16 Cache Component 備忘錄

大約在半年前的事情,2025年10月21日 Next.js 16 正式發布了。

Cache Components 這個概念本身是從 Next.js 16 開始引入的,現在快取可以明確地進行控制。

只有寫了 use cache 指令的地方才會被快取,並且可以使用以元件單位來進行快取。

既然文章也有提到,這次我就以 Next.js 16 的「Cache Components」使用方式為中心,整理一份備忘錄吧!

Next.js App Router 的 4 種快取

Next.js App Router 中的快取類型有以下 4 種模式。

Request Memoization：同一請求的去重。即使在不同元件中呼叫相同的 fetch,也只會執行一次。這是 Next.js 自動提供的功能。
資料快取：透過 fetch 選項操控快取的實現方式。
完整路由快取：用於靜態轉譯（SSG、ISR）的頁面級快取。在伺服器端以 RSC 承載和 HTML 的方式進行快取。
路由器快取：在用戶端記憶體中暫時快取「僅限 RSC 承載」的機制。透過使用 Next.js 的元件而發揮作用。

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

關於新功能「快取元件」能實現什麼功能。

使用use cache來簡化快取設定。只有書寫use cache的地方才會被快取，快取得以明確受控。
透過包裹可以分離元件，能夠在元件級別進行快取指定。

過去 Next.js 15 以前，fetch 預設會被快取，導致難以判斷哪些部分被快取、哪些部分未被快取，容易發生非預期的快取狀況。

由於預設會自動快取，若要失效快取則需要加上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' })，改為只用包裝即可！（若為 cacheComponents: false（預設值），則可以如往常使用 no-store）

函數層級的快取

過去只能在頁面層級指定快取，但透過 use cache、，現在可以在元件和函數層級進行快取設定。

其優勢在於在同一頁面內可以混合靜態渲染和動態渲染，使高速靜態配信與動態內容能共存，從而大幅提升初始載入速度和 UX。（PPR 這種渲染手法）

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 的 4 種快取

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