Next.js中的 Cache

前言

app route 模式中，默认渲染都是 Static Render， Rendering: Server Components | Next.js 。内置的 Cache 模式是 Building Your Application: Caching | Next.js

哪些页面会被构建时候预渲染？

File Conventions: Route Segment Config | Next.js

• page
• layout
• route handler

RSC 渲染的 cache

• 开发时，每次都会重新渲染
• 生产环境下，会优先使用预渲染过的数据，超过缓存时间，缓存数据会被更新 （构建后的内容）
• 如何代码中调用 await fetch(${getBaseUrl()}/api/example) 这样的接口，那么再 Static 构建的时候，是无法获取缓存的。触发在 dev 下缓存过？或者强制使用 force-dynamic, 再说着，只在客户端去掉，服务端应该通过 action 的方式，做函数调用了。而不是走请求。reactjs - How to perform an action/operation with nextjs API routes and server-side rendering - Stack Overflow
• 如果 layout.tsx 中设置了 export const dynamic = "force-dynamic" , 那么所有子页面都不会被 static rendered.

请求时候的 Cache

服务端 fetch

fetch 被 next.js 扩展了，提供了 cache, next 两个选项配置缓存策略， 并且 next.revalidate 优先级高度 route segment 配置。

If you have multiple fetch requests in a statically rendered route, and each has a different revalidation frequency. The lowest time will be used for all requests.

服务端配合第三方库

自行调用 cache 去默认做成缓存数据。

客户端通过 route handler 调用

定义的 api 路由，可以控制缓存策略。通过定义 route segment 配置，比如可以定义 dynamic 字段， 默认是 auto.

上面两种服务端调用的时候，可以是请求外部的服务，然后做了缓存。

这种是在客户端，没有第三方带缓存的方案， 直接请求接口的时候， 提供缓存策略。当然也可以在服务端调用。

客户端通过第三方库调用， 比如 react-query

这些库，自身提供了 swr 的机制。

总结

了解新的 fetch 自带的缓存机制， 以及如何控制失效策略。主要是影响的服务端的请求缓存，客户端还是 react-query 等第三方库的缓存机制。