Next.js 16 Cache Component 备忘录

大约半年前的事了，2025年10月21日 Next.js 16 正式发布了。

Cache Components 这个概念本身是从 Next.js 16 引入的，现在缓存可以显式控制了。

只有写了 use cache 指令的地方才会被缓存，使用还能实现按组件单位的缓存。

考虑到文章的发布安排，这次我就围绕 Next.js 16 的「Cache Components」用法，边总结边做备忘录！

Next.js App Router 的四种缓存

Next.js App Router 中的缓存类型分为以下四种模式。

Request Memoization：用于去重同一请求。即使在不同组件中调用同一个 fetch，也只会执行一次。这是 Next.js 自动执行的功能。
数据缓存：通过 fetch 选项来操控缓存的实现。
完整路由缓存：在静态渲染（SSG、ISR）中运行的按页面级别的缓存。在服务器端使用 RSC 负载和 HTML 缓存的机制。
路由缓存：在客户端内存中临时缓存「仅 RSC 负载」的机制。通过使用 Next.js 的组件来实现。

Next.js 16 的新功能`"use cache"`

关于新功能缓存组件，可以实现哪些功能。

使用use cache来简化缓存设置。use cache编写的位置才会被缓存，缓存可以得到显式控制。
用包装可以分离组件，从而能够按组件单位指定缓存。

传统的 Next.js 15 及更早版本中，fetch 默认被缓存，很难判断哪些地方被缓存了、哪些没有被缓存，容易出现意外缓存的情况。

因为默认自动缓存，若要使其失效，需要添加fetch(URL, { cache: 'no-store' })。

而 Next.js 16 改变了方法，当需要缓存时指定use cache，这样做更明确、更简洁。

此外，以前只能通过 fetch 来利用 Next.js 的 Data Cache，现在即使是不使用 fetch 的异步函数（如数据库查询）也可以直接应用缓存。

实现方法

需要在 next.config.js 文件中启用 Cache Components。

通过此配置，Cache Components 的功能即可启用！

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

在想要缓存的组件开头添加 use cache 指令。如果只想缓存特定的函数，可在函数内部添加。

'use cache'

async function getPosts() {
  const res = await fetch('<https://api.example.com/posts>')
  return res.json()
}

export default async function PostList() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  )
}

如果 fetch 函数没有加上 use cache 会怎样？

从 Next.js 16 开始，需要添加 use cache 来启用缓存，但如果既没有添加 use cache，也没有添加 cache 选项会怎样呢？

在 cacheComponents: true 配置下会产生错误。如果要有意禁用缓存，不应使用 fetch(url, { cache: 'no-store' })，而是用包裹即可！（在 cacheComponents: false（默认值）下，可以继续使用传统的 no-store）

函数级别的缓存

以前只能在页面级别指定缓存，现在通过使用 use cache、 可以在组件和函数级别进行缓存设置。

其优势在于，可以在一个页面内混合使用静态渲染和动态渲染，实现高速静态分发与动态内容的共存，从而大幅提升初始加载速度和 UX。（PPR 是一种渲染方法）

Suspense

的作用是将页面的其他部分与之隔离，单独处理。

通过用包装组件可以实现组件分离，因此如果想在组件级别进行缓存，应在被包装的组件内部指定。

关于渲染

渲染方法由缓存设置决定。

「想如何展示这个页面/数据？」（更新频率等）

↓

决定渲染方法（SSG / ISR / SSR / PPR / CSR）

↓

相应地设置缓存

这种思考方式。

渲染方法有几种模式，但这次就先不讲了！

比如说，

「从 microCMS 获取数据并通过动态路由显示博客文章」的情况

↓

渲染方法最适合用 SSG 或 ISR（因为文章内容不会频繁更新）

↓

启用缓存最优→添加 use cache

就像这样可以实现。

顺便说一下，如果在 next.config.js 文件中没有将 Cache Components 设置为 true，就可以继续使用传统的 fetch 缓存选项。

总结

在考虑缓存设置时，「这些数据和页面应该如何展示？」根据页面来考虑最优的性能并进行实现的流程很重要。

一旦确定了答案，是否使用 use cache 也就自然而然地决定了。

许多人可能会分开理解缓存、渲染方法和数据获取等概念，但其实它们是相互关联的！

重要的是把它们作为一个整体流程来考虑，而不是分开的概念！！

Next.js App Router 的四种缓存

Next.js 16 的新功能`"use cache"`