cacheLife
cacheLife 函式用於設定函式或元件的快取生命週期。它應與 use cache 指令一起使用，並在函式或元件的範圍內呼叫。
使用方式
要使用 cacheLife，請先在 next.config.js 檔案中啟用 dynamicIO 標記：
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfigconst nextConfig = {
experimental: {
dynamicIO: true,
},
}
export default nextConfig然後，在函式或元件的範圍內匯入並呼叫 cacheLife 函式：
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
export default async function Page() {
cacheLife('hours')
return <div>Page</div>
}'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
export default async function Page() {
cacheLife('hours')
return <div>Page</div>
}參考
預設快取設定檔
Next.js 提供了一組基於不同時間尺度的命名快取設定檔。如果在使用 use cache 指令時未在 cacheLife 函式中指定快取設定檔，Next.js 會自動套用 default 快取設定檔。
不過，我們建議在使用 use cache 指令時總是新增快取設定檔，以明確定義快取行為。
| 設定檔 | stale | revalidate | expire | 說明 |
|---|---|---|---|---|
default | 5 分鐘 | 15 分鐘 | 1 年 | 預設設定檔，適用於不需要頻繁更新的內容 |
seconds | 0 | 1 秒 | 1 秒 | 適用於需要近即時更新的快速變動內容 |
minutes | 5 分鐘 | 1 分鐘 | 1 小時 | 適用於一小時內頻繁更新的內容 |
hours | 5 分鐘 | 1 小時 | 1 天 | 適用於每日更新但可稍微過時的內容 |
days | 5 分鐘 | 1 天 | 1 週 | 適用於每週更新但可有一天的延遲 |
weeks | 5 分鐘 | 1 週 | 30 天 | 適用於每月更新但可有一週延遲 |
max | 5 分鐘 | 30 天 | 1 年 | 適用於極少需要更新的穩定內容 |
用於參照快取設定檔的字串值本身並無特定意義，它們僅作為語意標籤使用。這讓您能在程式碼庫中更好地理解和管理快取內容。
須知事項：更新
staleTimes和expireTime設定選項也會更新default快取設定檔的stale和expire屬性。
自訂快取設定檔
您可以透過在 next.config.ts 檔案的 cacheLife 選項中新增設定檔來設定自訂快取設定檔。
快取設定檔是包含以下屬性的物件：
| 屬性 | 值 | 說明 | 要求 |
|---|---|---|---|
stale | number | 用戶端快取值而不檢查伺服器的持續時間。 | 選填 |
revalidate | number | 快取在伺服器上重新整理的頻率；在重新驗證期間可能會提供過時的值。 | 選填 |
expire | number | 值在切換到動態擷取前可保持過時的最大持續時間；必須比 revalidate 長。 | 選填 - 必須比 revalidate 長 |
"stale" 屬性與 staleTimes 設定的不同之處在於它專門控制用戶端路由快取。雖然 staleTimes 是影響所有動態和靜態資料實例的全域設定，但 cacheLife 設定允許您以每個函式或每條路由為基礎定義 "stale" 時間。
須知事項："stale" 屬性不會設定
Cache-control: max-age標頭。它控制的是用戶端路由快取。
範例
定義可重複使用的快取設定檔
您可以在 next.config.ts 檔案中定義可重複使用的快取設定檔。選擇一個符合您使用情境的名稱，並為 stale、revalidate 和 expire 屬性設定值。您可以根據需要建立任意數量的自訂快取設定檔。每個設定檔都可以透過其名稱作為傳遞給 cacheLife 函式的字串值來參照。
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
cacheLife: {
biweekly: {
stale: 60 * 60 * 24 * 14, // 14 天
revalidate: 60 * 60 * 24, // 1 天
expire: 60 * 60 * 24 * 14, // 14 天
},
},
},
}
module.exports = nextConfigconst nextConfig = {
experimental: {
dynamicIO: true,
cacheLife: {
biweekly: {
stale: 60 * 60 * 24 * 14, // 14 天
revalidate: 60 * 60 * 24, // 1 天
expire: 60 * 60 * 24 * 14, // 14 天
},
},
},
}
module.exports = nextConfig上述範例快取 14 天，每天檢查更新，並在 14 天後過期快取。然後您可以透過其名稱在整個應用程式中參照此設定檔：
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
export default async function Page() {
cacheLife('biweekly')
return <div>Page</div>
}覆寫預設快取設定檔
雖然預設快取設定檔提供了一種有用的方式來思考快取輸出的任何部分可以有多新或多舊，但您可能更喜歡不同的命名設定檔，以更好地與應用程式的快取策略對齊。
您可以透過建立與預設設定檔同名的設定檔來覆寫預設的命名快取設定檔。
以下範例展示如何覆寫預設的 "days" 快取設定檔：
const nextConfig = {
experimental: {
dynamicIO: true,
cacheLife: {
days: {
stale: 3600, // 1 小時
revalidate: 900, // 15 分鐘
expire: 86400, // 1 天
},
},
},
}
module.exports = nextConfig內聯定義快取設定檔
對於特定使用情境，您可以透過傳遞物件給 cacheLife 函式來設定自訂快取設定檔：
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
export default async function Page() {
cacheLife({
stale: 3600, // 1 小時
revalidate: 900, // 15 分鐘
expire: 86400, // 1 天
})
return <div>Page</div>
}'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
export default async function Page() {
cacheLife({
stale: 3600, // 1 小時
revalidate: 900, // 15 分鐘
expire: 86400, // 1 天
})
return <div>Page</div>
}此內聯快取設定檔僅會套用到建立它的函式或檔案中。如果您想在整個應用程式中重複使用相同的設定檔，可以將設定新增到 next.config.ts 檔案的 cacheLife 屬性中。
use cache 和 cacheLife 的巢狀使用
當在同一路由或元件樹中定義多個快取行為時，如果內部快取指定了自己的 cacheLife 設定檔，外部快取將會尊重其中最短的快取持續時間。這僅適用於外部快取未定義自己的明確 cacheLife 設定檔時。
例如，如果您在頁面中新增 use cache 指令而未指定快取設定檔，將會隱式套用預設快取設定檔 (cacheLife(”default”))。如果匯入到頁面中的元件也使用 use cache 指令並帶有自己的快取設定檔，則會比較外部和內部快取設定檔，並套用設定檔中最短的持續時間。
// 父元件
import { unstable_cacheLife as cacheLife } from 'next/cache'
import { ChildComponent } from './child'
export async function ParentComponent() {
'use cache'
cacheLife('days')
return (
<div>
<ChildComponent />
</div>
)
}在另一個檔案中，我們定義了匯入的子元件：
// 子元件
import { unstable_cacheLife as cacheLife } from 'next/cache'
export async function ChildComponent() {
'use cache'
cacheLife('hours')
return <div>Child Content</div>
// 此元件的快取將遵循較短的 'hours' 設定檔
}