Data Cache 是 Next.js 对 fetch 请求结果的持久化缓存。 默认情况下,所有 fetch 请求都会被缓存,除非明确指定不缓存。
默认行为:
fetch(url, { cache: 'force-cache' })⚠️ 关键概念:Dynamic APIs 与 fetch 缓存行为
本页面使用了 Dynamic API(`cache: 'no-store'`),因此是动态页面。
在动态页面中,fetch 的默认行为是 auto no cache:
💡 解决方案:必须显式指定 cache: 'force-cache' 才能缓存!
💡 本页面测试:
使用内部的 /api/time API 来演示真实的 fetch 缓存行为。 通过对比 API 返回的时间戳,可以直观地看到缓存是否生效。
关键:三个测试都调用同一个 API(http://localhost:3000/api/time),但使用不同的缓存策略。
📅 页面渲染时间:2025-12-27T12:33:51.601Z
刷新页面观察此时间是否变化。在生产环境(pnpm build && pnpm start)中, 如果使用了 Full Route Cache,这个时间不会变化。
fetch(url) // 默认会缓存API 返回时间:2025-12-27T12:33:51.597Z
Fetch 执行时间:2025-12-27T12:33:51.597Z
⚠️ 使用本地时间(API 不可用)
✅ 预期行为:多次刷新页面,这两个时间应该保持不变(使用了缓存)。
在生产环境(pnpm build && pnpm start)中,即使重启服务器,缓存也会持久化。
fetch(url, { cache: 'no-store' }) // 每次都重新请求API 返回时间:2025-12-27T12:33:51.598Z
Fetch 执行时间:2025-12-27T12:33:51.598Z
⚠️ 使用本地时间(API 不可用)
🔴 预期行为:每次刷新页面,这两个时间应该都会变化(没有使用缓存)。
适用场景:实时数据、用户相关数据、每次都需要最新数据的场景。
fetch(url, { next: { revalidate: 10 } }) // 10秒后重新验证API 返回时间:2025-12-27T12:33:51.601Z
Fetch 执行时间:2025-12-27T12:33:51.601Z
⚠️ 使用本地时间(API 不可用)
🔄 预期行为:在 10 秒内刷新页面,Fetch 执行时间保持不变(使用 Data Cache)。
超过 10 秒后刷新,时间会更新(Data Cache 重新验证)。
⚠️ 注意:这是 Data Cache 的行为, 不是页面级缓存。只有这个 fetch 请求被缓存,页面本身仍会重新渲染。
查看终端日志,你会看到每次刷新都有页面渲染日志,但 10 秒内不会重新 fetch。
每次渲染页面时,终端会输出 [DATA CACHE PAGE] 日志
pnpm build && pnpm start在生产环境中,缓存行为更明显,且会持久化到文件系统
打开浏览器开发者工具的 Network 标签,查看是否发起了新的网络请求
| 策略 | 代码 | 行为 | 使用场景 |
|---|---|---|---|
| 默认缓存 | { cache: 'force-cache' } | 永久缓存 | 静态内容 |
| 禁用缓存 | { cache: 'no-store' } | 每次请求 | 实时数据 |
| 定时重新验证 | { next: { revalidate: N } } | N秒后更新 | 定期更新内容 |