Next.js本地开发中如何判断fetch()是否使用了Data Cache？

一、日志能否判断Data Cache是否被使用？ #

可以通过你提供的日志直接判断Data Cache的使用情况。

二、日志末尾true/false的含义 #

日志末尾FETCH后的布尔值直接对应缓存命中状态：

• true：表示本次请求命中了Data Cache，直接从缓存读取数据，没有发起新的网络请求
• false：表示本次请求未命中Data Cache，需要发起新的网络请求获取数据

补充说明日志其他字段：

• 开头的哈希字符串是请求对应的缓存键，用于唯一标识缓存条目
• 中括号内的内容是缓存失效标签（revalidation tags），后续可以通过这些标签主动触发缓存失效

三、本地开发的其他检查方法 #

如果需要更直观的验证方式，还可以用以下方法：

• 浏览器Network面板验证：打开浏览器DevTools的Network标签，查看目标fetch请求的Size列。如果从Data Cache读取，会显示(disk cache)或(memory cache)，且请求耗时远低于普通网络请求。
• 主动触发缓存失效验证：在代码中修改fetch请求的next.revalidate配置，或者调用revalidateTag/revalidatePath方法主动失效指定缓存，刷新页面后观察日志和Network请求的变化，确认缓存是否重新生成。
• 查看本地缓存文件：Next.js本地开发的Data Cache默认存储在项目根目录的.next/cache文件夹下，对应缓存的请求会生成以哈希命名的文件，可通过查看该目录的文件结构判断缓存是否生成。

内容的提问来源于stack exchange，提问作者Magnus