nuxt缓存处理

• nuxt的isr缓存配置
• 如何利于useNuxtData来获取缓存
• 服务端和客户端请求数据缓存问题

• ISR 是服务端页面缓存
• useNuxtData 是客户端/运行时数据缓存

useNuxtData

只是针对页面路由跳转的数据缓存体验优化，对lcp、fcp的指标没有影响

• 首次服务端渲染的时候，通过useFetch来获取数据，nuxt会把结果数据放在缓存中， 客户端 hydration 时直接复用，避免再请求一次
• 使用useNuxtData可以获取缓存数据，避免重复请求
• 客户端路由跳转时，使用useNuxtData来获取服务端请求的数据，来获取缓存
• useNuxtData它可以读取 useAsyncData、useLazyAsyncData、useFetch、useLazyFetch 的当前缓存值
• useNuxtData('xxx') 只能读缓存key的数据
• useNuxtData可以读取、设置缓存

问题：

• useNuxtData 获取缓存数据和isr缓存会冲突吗？
  • 不会冲突，因为两者缓存对象不同。
• useNuxtData 的缓存什么时候失效
  • useNuxtData(key) 读的是 Nuxt 应用运行时里的 asyncData/useFetch 数据池，本质上是当前页面会话内的数据复用。

useNuxtData读取、设置缓存

先查缓存，命中直接用，如果没命中缓存，那么进行缓存设置

• 读取

js

const cached = useNuxtData<MyType>('home-data')
// 读取
if (cached.data.value) {
  console.log(cached.data.value)
}

• 设置
  • useNuxtData(key) 返回的是这个 key 对应的响应式引用，可以直接赋值
  • result 写进 Nuxt 这个 key 对应的数据缓存中。

js

const cached = useNuxtData<MyType>('home-data')
cached.data.value = result

• 请求配置缓存
  • 统一在request中封装处理useNuxtData缓存问题

js

await httpGet('/web/index', {
  openCache: true, // 开启useNuxtData获取缓存
  openCacheTtl: true, // 开启缓存的时间配置
  cacheTtl: 60 * 1000, // 1分钟
})