这件事大约发生在六个月前,但 Next.js 16 正式发布于 2025 年 10 月 21 日。
缓存组件的概念本身是在 Next.js 16 中引入的,它允许对缓存进行显式控制。
use cache只有指令写入的位置才会被缓存。<Sunpense>这也支持组件级缓存。
既然我要写一篇关于它的文章,我就把如何使用 Next.js 16 的“缓存组件”总结一下,作为自己的备忘录吧!
Next.js AppRouter 中的四个缓存
Next.js AppRouter 提供以下四种缓存类型:
- Request Memoization:这指的是消除重复请求。即使在不同的组件中调用同一个 fetch 函数,它也只会执行一次。这是 Next.js 自动处理的特性。
- Data Cache`fetch` 选项用于操作缓存实现。
- Full Route Cache:页面级缓存,支持静态渲染(SSG、ISR)。该机制使用 RSC 有效负载和 HTML 在服务器端进行缓存。
- Router Cache:此机制仅将 RSC 有效负载临时缓存到客户端内存中。它通过使用 Next.js 的 组件来实现。
Next.js 16 的新特性"use cache"
新的缓存组件功能可以做什么?
use cache使用此功能可简化缓存设置。use cache仅缓存代码编写的位置,现在可以显式控制缓存。<Suspense>通过将组件包含在 `