Next.js 中的 use cache 指令详解：提升应用性能的缓存机制

什么是 use cache 指令

在 Next.js 应用中，use cache 是一个实验性指令，它允许开发者将路由、React 组件或函数标记为可缓存。通过缓存数据或渲染结果，可以显著提升应用性能，减少重复计算和网络请求。

启用 use cache

要使用 use cache 功能，首先需要在 Next.js 配置文件中启用它：

// next.config.js
module.exports = {
  experimental: {
    useCache: true,
  },
}

启用后，你可以在文件、组件或函数级别使用 use cache 指令。

使用场景与示例

1. 文件级别缓存

在文件顶部添加 use cache 指令，该文件中的所有导出都将被缓存：

'use cache'

export default async function Page() {
  // 页面内容
}

2. 组件级别缓存

在组件函数内部添加指令，仅缓存该组件的输出：

export async function MyComponent() {
  'use cache'
  return <div>缓存内容</div>
}

3. 函数级别缓存

缓存异步函数的返回结果：

export async function fetchData() {
  'use cache'
  const response = await fetch('/api/data')
  return response.json()
}

缓存机制详解

缓存键生成

Next.js 通过以下要素生成缓存键：

• 构建ID（每次构建唯一）
• 函数ID（函数唯一标识）
• 可序列化的函数参数或props

这意味着只要输入相同，就会复用相同的缓存结果。

非序列化参数处理

对于无法序列化的参数（如JSX子元素），它们会成为缓存函数中的引用，不会被包含在缓存键中：

function CachedComponent({ children }) {
  'use cache'
  return <div>{children}</div>
}

返回值要求

所有缓存函数的返回值必须是可序列化的，确保能够正确存储和检索。

缓存生命周期与更新

默认行为

默认情况下，服务器端缓存每15分钟重新验证一次。这种设置适合不频繁更新的内容。

自定义缓存控制

Next.js 提供了精细的缓存控制：

1. cacheLife - 设置缓存生命周期
2. cacheTag - 创建标签用于按需重新验证

这些API在客户端和服务器缓存层都有效，实现统一的缓存策略。

实际应用技巧

缓存整个路由

要预渲染整个路由，需要在布局和页面文件中都添加 use cache：

// layout.js
'use cache'
export default function Layout({ children }) {
  return <div>{ children }</div>
}

// page.js
'use cache'
export default function Page() {
  return <main>页面内容</main>
}

混合缓存与非缓存内容

可以通过传递 children 的方式在缓存组件中嵌入动态内容：

export default async function Page() {
  const dynamicData = await fetchDynamicData()
  return (
    <CachedComponent>
      <DynamicContent data={dynamicData} />
    </CachedComponent>
  )
}

与服务器动作结合

可以将服务器动作传递给客户端组件，而不在缓存函数中调用它们：

// page.js
export default async function Page() {
  const serverAction = async () => {
    'use server'
    // 服务器端操作
  }
  return <CachedComponent action={serverAction} />
}

// CachedComponent.js
async function CachedComponent({ action }) {
  'use cache'
  return <ClientComponent action={action} />
}

// ClientComponent.js
'use client'
export default function ClientComponent({ action }) {
  return <button onClick={action}>执行操作</button>
}

平台支持情况

部署方式	是否支持 use cache
Node.js 服务器	是
Docker 容器	是
静态导出	否
适配器	取决于具体平台

版本历史

• v15.0.0: 首次引入 use cache 作为实验性功能

通过合理使用 use cache 指令，开发者可以在 Next.js 应用中实现高效的缓存策略，显著提升性能表现。