组件内部API调用的Nuxtjs Redis缓存实现

我正在使用插件将我的QPI请求缓存到外部服务的服务器端

我在组件级使用cacheFetch方法，该组件加载在动态页面上（由其slug定义）。当我导航到动态页面时，API调用不会缓存在Redis中，但是当我重新加载页面时，缓存会按预期进行。 下面是我的代码的结构：

_slug.js（适用于/用户）

当我直接在浏览器中加载用户页面时，帖子的json响应会按预期保存在Redis中。当我使用NuxtLink在应用程序中导航时，用户页面显示正确（包括帖子），但没有设置键或从Redis获取键

---

如何确保在用户与应用程序交互时缓存API调用？

当您在客户端导航时，redis仅在服务器端而不是客户端可用。如果您没有访问redis的权限，则可以在用户导航时将绝对链接设置为渲染服务器端，但我不建议这样做。

---

最好的解决方案是在api中缓存redis中的数据。

好的，谢谢@zia，当来自客户端时，我也需要缓存查询，所以我想我需要另一个不使用nuxt perfect缓存的实现。我想这个插件通过服务器中间件添加了缓存功能，这不是我在这里需要的。如果您需要为所有客户端缓存一次，那么在浏览器中是没有办法的，如果您的数据总是一致的，那么您可以为ssg使用nuxt composition api

<template>
  <h1>{{ user.name }}</h1>
  <Posts :author = user.id>
</template>

<script>
import Posts from '~/components/Posts.vue'
export default {
  components: { Posts },
  async asyncData({params}) {
    const user = await fetch(`/users/${params.slug}`)
    .then(res => res.json())
  }
}
</script>

props: ['author'],
async fetch() {
  this.posts = await this.$cacheFetch({ key:`user--#{this.author}--posts`, expire: 60 * 60 },
    async () => {
      return await fetch(`/users/#{this.author}/posts`).then(res => res.json())
    })
},
data() {
  return {
    posts: []
  }
}