cacheLife

cacheLife 函式用於設定函式或元件的快取生命週期。它應該與 use cache 指令一起使用，並位於函式或元件的作用域內。

用法

要使用 cacheLife，請在您的 next.config.js 檔案中啟用 cacheComponents 標誌。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  cacheComponents: true,
}
 
export default nextConfig

然後，在函式或元件的作用域內匯入並呼叫 cacheLife 函式。

'use cache'
import { cacheLife } from 'next/cache'
 
export default async function Page() {
  cacheLife('hours')
  return <div>Page</div>
}

參考

預設快取配置檔案

Next.js 提供了一組基於不同時間尺度的命名快取配置檔案。如果您沒有在 cacheLife 函式中指定快取配置檔案以及 use cache 指令，Next.js 將自動應用 default 快取配置檔案。

但是，我們建議在使用 use cache 指令時始終新增快取配置檔案，以明確定義快取行為。

用於引用快取配置檔案的字串值不具有固有含義；相反，它們充當語義標籤。這使您可以在程式碼庫中更好地理解和管理快取內容。

須知： 更新 staleTimes 和 expireTime 配置選項也會更新 default 快取配置檔案的 stale 和 expire 屬性。

自定義快取配置檔案

您可以透過將自定義快取配置檔案新增到 next.config.ts 檔案中的 cacheLife 選項來配置它們。

快取配置檔案是包含以下屬性的物件

“stale”屬性與 staleTimes 設定不同，因為它專門控制客戶端路由器快取。雖然 staleTimes 是一個影響所有動態和靜態資料例項的全域性設定，但 cacheLife 配置允許您在每個函式或每個路由的基礎上定義“stale”時間。

客戶端路由器快取中的 stale 時間

“stale”屬性不設定 Cache-control: max-age 頭。相反，它控制客戶端路由器快取。伺服器透過 x-nextjs-stale-time 響應頭（以秒為單位）將此值傳送給客戶端，客戶端路由器使用它來確定在需要重新驗證之前快取路由多長時間。

客戶端強制執行最短 30 秒的過期時間：這確保了預取的資料在使用者單擊預取後的連結時仍能長時間可用。如果沒有這個最小值，非常短的過期時間會導致預取的資料在使用之前過期，從而使預取無效。

此最小值僅適用於基於時間的過期。當您從伺服器操作呼叫 revalidateTag、revalidatePath、updateTag 或 refresh 時，整個客戶端快取會立即清除，完全繞過過期時間。

示例

定義可重用的快取配置檔案

您可以透過在 next.config.ts 檔案中定義快取配置檔案來建立可重用的快取配置檔案。選擇一個適合您的用例的名稱，併為 stale、revalidate 和 expire 屬性設定值。您可以根據需要建立任意數量的自定義快取配置檔案。每個配置檔案都可以透過其名稱作為傳遞給 cacheLife 函式的字串值來引用。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  cacheComponents: true,
  cacheLife: {
    biweekly: {
      stale: 60 * 60 * 24 * 14, // 14 days
      revalidate: 60 * 60 * 24, // 1 day
      expire: 60 * 60 * 24 * 14, // 14 days
    },
  },
}
 
module.exports = nextConfig

上面的示例快取 14 天，每天檢查更新，並在 14 天后使快取失效。然後，您可以在整個應用程式中透過其名稱引用此配置檔案。

'use cache'
import { cacheLife } from 'next/cache'
 
export default async function Page() {
  cacheLife('biweekly')
  return <div>Page</div>
}

覆蓋預設快取配置檔案

雖然預設快取配置檔案提供了一種思考可快取輸出的任何給定部分可以有多新鮮或過時的有用方式，但您可能更喜歡不同的命名配置檔案，以更好地與您的應用程式快取策略保持一致。

您可以透過建立一個與預設配置檔案同名的新配置來覆蓋預設命名快取配置檔案。

下面的示例展示瞭如何覆蓋預設的“days”快取配置檔案。

const nextConfig = {
  cacheComponents: true,
  cacheLife: {
    days: {
      stale: 3600, // 1 hour
      revalidate: 900, // 15 minutes
      expire: 86400, // 1 day
    },
  },
}
 
module.exports = nextConfig

內聯定義快取配置檔案

對於特定用例，您可以透過將物件傳遞給 cacheLife 函式來設定自定義快取配置檔案。

'use cache'
import { cacheLife } from 'next/cache'
 
export default async function Page() {
  cacheLife({
    stale: 3600, // 1 hour
    revalidate: 900, // 15 minutes
    expire: 86400, // 1 day
  })
 
  return <div>Page</div>
}

此內聯快取配置檔案將僅應用於它建立的函式或檔案。如果您想在整個應用程式中重用相同的配置檔案，您可以將 配置新增 到 next.config.ts 檔案的 cacheLife 屬性中。

use cache 和 cacheLife 的巢狀使用

當在同一路由或元件樹中定義多個快取行為時，如果內部快取指定了它們自己的 cacheLife 配置檔案，則外部快取將遵守其中最短的快取持續時間。這僅適用於外部快取沒有定義自己的顯式 cacheLife 配置檔案的情況。

例如，如果您在頁面中新增 use cache 指令，但未指定快取配置檔案，則將隱式應用預設快取配置檔案 (cacheLife(”default”))。如果匯入到頁面的元件也使用帶有其自己快取配置檔案的 use cache 指令，則將比較外部和內部快取配置檔案，並應用配置檔案中設定的最短持續時間。

// Parent component
import { cacheLife } from 'next/cache'
import { ChildComponent } from './child'
 
export async function ParentComponent() {
  'use cache'
  cacheLife('days')
 
  return (
    <div>
      <ChildComponent />
    </div>
  )
}

在單獨的檔案中，我們定義了匯入的 Child 元件。

// Child component
import { cacheLife } from 'next/cache'
 
export async function ChildComponent() {
  'use cache'
  cacheLife('hours')
  return <div>Child Content</div>
 
  // This component's cache will respect the shorter 'hours' profile
}