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
}