Next.js 缓存机制全解析

本分类系统性地拆解 Next.js App Router 的四层缓存机制——请求记忆、数据缓存、全路由缓存、路由器缓存。

为什么写这个系列？

缓存是 Next.js App Router 中最复杂、踩坑最多、也最难调试的知识点。"数据库明明更新了，页面还是旧的"——几乎每个 Next.js 开发者都遇到过这个问题，而答案往往藏在四层缓存的某一层里。

网上关于 Next.js 缓存的教程很多，但大部分对应的是 13/14 的默认行为，和 15+ 完全相反。本系列基于 Next.js 15+，同时覆盖 Next.js 16 的新 API（updateTag、use cache、cacheLife 等），力求给出一份准确、实用、不过时的参考。

系列目录

1. 背景介绍：为什么 Next.js 的缓存这么复杂？从 Pages Router 到 App Router 的缓存演进史，以及四层缓存模型的设计动机。
2. 第 1 层：请求记忆：单次请求内的自动去重，让组件级数据获取成为可能。
3. 第 2 层：数据缓存：跨请求的持久化缓存，updateTag / revalidateTag 的正确用法。
4. 第 3 层：全路由缓存：构建时缓存整个页面的渲染结果，开发环境和生产环境行为差异的根源。
5. 第 4 层：路由器缓存：浏览器端的页面快照，"点后退看到旧数据"的元凶。
6. 总结与实战：四层速查表、诊断流程、缓存策略选择，以及前后端分离场景下后端如何刷新 Next.js 缓存。

适合谁读？

• 正在使用或准备使用 Next.js App Router 的开发者
• 被"数据不更新"问题困扰过的 Next.js 用户
• 想深入理解 Next.js 性能优化机制的前端架构师
• 前后端分离项目中需要和 Next.js 缓存联动的后端开发者