Next.js 使编写复杂的服务器渲染 React 应用程序变得更加容易。但是缓存机制极其复杂，很容易导致代码中出现难以调试和修复的 bug。 以下是 Next.js 中的四种缓存机制：
- 请求记忆化
- 数据缓存
- 全路由缓存
- 路由器缓存
对于上述每一项，会研究它们的使用、它们的存储位置、持续时间以及如何有效地管理它们，包括使缓存失效并选择退出的方法。掌握这些机制可以很好的协同工作以优化 Next.js 的性能。
fetch
- 在一次render中 相同的get请求，在第二次请求的时候会直接使用缓存。
- 非fetch的请求可以使用react的catch，返回一个可缓存版本的fetch。
- 可以使用Revalidation和AbortController去清除缓存。
data cache
- 在nextjs中，默认所有server components中的请求都会被缓存在server。他和fetch缓存不同的是不会自动清除。即使你发布一个新版本，数据都不会被清除。
- 使用 next.revalidate告诉nextjs 多长时间之后清除缓存。或者使用revalidate config。
- 如果你的数据不是很规律更新，可以使用revalidatePath 清除那个path下所有缓存的fetch。 或者使用 revalidateTag去清除指定tag的fetch缓存。
退出缓存的方法
在fetch添加 cache:no-store 或者调用next的 noStore方法 对一整个page，使用 export const dynamic = "force-dynamic"/ export const revalidate = 0 会强制更新页面。
- 针对非fetch 请求，使用next的cache函数，他接收三个参数，要缓存的函数，唯一的key，可选的option 如revalidate或者tag。
全路由缓存
路由缓存在构建时候存储静态页面以及RSCP(react server componennt payload).与data cache 不同的是他在每次重新部署的时候会清除更新缓存。
退出方法 如果fetch没有缓存在data cache 路由就不会被缓存。 使用dynamic data 如headers，cookies，searchparams，或者动态URL 如 /blog/[id].
路由缓存
这是最后一个也是唯一一个缓存在client 而不是在server。静态的路由缓存5分钟，动态的缓存30s。 可以使用revalidate Path/tag清除，也可以只用useRouter的router.refresh清除。路由缓存无法退出，只能清除。
总结
最后给一个四种缓存汇总的对比：
