Next.js 缓存机制测试

🔍 Next.js 的四种缓存机制

请求记忆化 - 在一次渲染过程中自动去重相同的请求

生命周期：单次请求的渲染周期

数据缓存 - 持久化存储 fetch 请求的结果

生命周期：跨请求和部署持久化

全路由缓存 - 在构建时渲染并缓存整个路由

生命周期：持久化，直到重新构建或重新验证

客户端路由缓存 - 在客户端缓存访问过的路由

生命周期：用户会话期间或特定时间

测试 fetch 请求的缓存行为

测试整个路由的缓存和静态生成

测试同一渲染周期内的请求去重

测试客户端路由的缓存行为

测试 Next.js Image 组件的缓存和优化

查看所有缓存机制的对比表格、使用场景和最佳实践

开发环境 vs 生产环境：
某些缓存行为在开发环境（pnpm dev）和生产环境（pnpm build && pnpm start）中不同。Full Route Cache 只在生产环境生效。
查看时间戳：
每个测试页面都会显示时间戳，通过刷新页面观察时间戳是否变化来判断是否使用了缓存。
查看控制台：
打开终端（服务端日志）和浏览器控制台（客户端日志）查看详细的缓存行为。
构建测试：
运行 pnpm build 后，查看输出信息，会显示哪些路由是静态的（○）、哪些是动态的（λ）。