Topics

關於 Next.js 16 快取組件的說明

  • column

這件事大約發生在六個月前,但 Next.js 16 正式發佈於 2025 年 10 月 21 日。

快取元件的概念本身是在 Next.js 16 中引入的,它允許對快取進行明確控制。

use cache只有指令寫入的位置才會被快取。<Sunpense>這也支援組件級快取。

既然我要寫一篇關於它的文章,我就把如何使用 Next.js 16 的「快取元件」總結一下,作為自己的備忘錄!

Next.js AppRouter 中的四個緩存

Next.js AppRouter 提供以下四種快取類型:

  • Request Memoization:這指的是消除重複請求。即使在不同的元件中呼叫同一個 fetch 函數,它也只會執行一次。這是 Next.js 自動處理的特性。
  • Data Cache`fetch` 選項用於操作快取實作。
  • Full Route Cache:頁面級緩存,支援靜態渲染(SSG、ISR)。此機制使用 RSC 有效負載和 HTML 在伺服器端進行快取。
  • Router Cache:此機制僅將 RSC 有效負載暫時快取到客戶端記憶體中。它透過使用 Next.js 的 元件來實現。

Next.js 16 的新特性"use cache"

新的快取組件功能可以做什麼?

  • use cache使用此功能可簡化快取設定。use cache僅快取程式碼編寫的位置,現在可以明確控制快取。
  • <Suspense>透過將元件包含在 `