← 返回缓存测试

Data Cache(数据缓存)测试

📦 什么是 Data Cache?

Data Cache 是 Next.js 对 fetch 请求结果的持久化缓存。 默认情况下,所有 fetch 请求都会被缓存,除非明确指定不缓存。

默认行为:

fetch(url, { cache: 'force-cache' })

⚠️ 关键概念:Dynamic APIs 与 fetch 缓存行为

本页面使用了 Dynamic API(`cache: 'no-store'`),因此是动态页面。

在动态页面中,fetch 的默认行为是 auto no cache

  • 开发环境:每次都重新请求
  • 生产环境:构建时请求一次,但检测到 Dynamic APIs 后会回退到每次请求

💡 解决方案:必须显式指定 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,这个时间不会变化。

✅ 测试 1:默认缓存(force-cache)

fetch(url) // 默认会缓存

API 返回时间:2025-12-27T12:33:51.597Z

Fetch 执行时间:2025-12-27T12:33:51.597Z

⚠️ 使用本地时间(API 不可用)

✅ 预期行为:多次刷新页面,这两个时间应该保持不变(使用了缓存)。
在生产环境(pnpm build && pnpm start)中,即使重启服务器,缓存也会持久化。

🔴 测试 2:禁用缓存(no-store)

fetch(url, { cache: 'no-store' }) // 每次都重新请求

API 返回时间:2025-12-27T12:33:51.598Z

Fetch 执行时间:2025-12-27T12:33:51.598Z

⚠️ 使用本地时间(API 不可用)

🔴 预期行为:每次刷新页面,这两个时间应该都会变化(没有使用缓存)。
适用场景:实时数据、用户相关数据、每次都需要最新数据的场景。

🔄 测试 3:定时重新验证(revalidate)

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。

🧪 如何验证缓存?

  1. 1. 查看时间戳:
    • • 强制缓存(force-cache):刷新页面,时间不变 ✅
    • • 禁用缓存:刷新页面,时间变化 🔴
    • • 定时重新验证(revalidate: 60):60秒内不变,60秒后变化 🔄
  2. 2. 查看终端日志:

    每次渲染页面时,终端会输出 [DATA CACHE PAGE] 日志

  3. 3. 生产环境测试:
    pnpm build && pnpm start

    在生产环境中,缓存行为更明显,且会持久化到文件系统

  4. 4. 查看网络请求:

    打开浏览器开发者工具的 Network 标签,查看是否发起了新的网络请求

📊 缓存策略对比

策略代码行为使用场景
默认缓存{ cache: 'force-cache' }永久缓存静态内容
禁用缓存{ cache: 'no-store' }每次请求实时数据
定时重新验证{ next: { revalidate: N } }N秒后更新定期更新内容