1

我想总是在服务器端获取数据（为了防止它们可以从网络选项卡中读取）

当页面刷新（或第一次加载）process.server返回true时，网络选项卡上什么也看不到。

  async asyncData({ params, $axios }) {
    console.log(process.server)
    const { id } = params;
    const url = `api/post/${params.id}`
    const post = await $axios.$get(url);
    return { post };
  }

但是，当我尝试使用内部链接导航时，router-link或者nuxt-link总是以客户端获取结束。process.server返回false和请求/响应可以在网络选项卡上看到。

我想出的唯一解决方案是使用<a>内部链接，这要归功于此页面已加载，我们可以获取服务器端。

Nuxt 文档说始终使用nuxt-link内部<a>链接，但<a>可用于外部链接。所以我想知道如果我们使用内部链接有什么缺点（只是为了刷新页面并确保在服务器端获取）

或者有没有更好的方法在我们导航时始终获取服务器端？

4

1 回答 1

1

这就是我处理它并nuxt-link始终使用 ' 的方式。

使用fetch钩子，然后在两者上都调用它。

async fetch() {
  this.getItems()
},

此外，如果您愿意，您可以通过 直接调用服务器端代码，这与您在商店中使用nuxtServerInitthis.$root.context.ssrContext所做的事情相同。

async fetch() {
  if (process.server) {
    let items = []
    if (this.isset(this.$root, 'context.ssrContext.req.thingsModel')) {
      items = this.$root.context.ssrContext.req.cache.get('things', [])
      if (!items.length) {
        items = await this.$root.context.ssrContext.req.thingsModel.get(
          this.limit
        )
        items = this.$copy(items)
        this.$root.context.ssrContext.req.cache.put('things', items, 60000 * 60)
      }
    }

    this.items = items
  } else {
    this.getItems() // would be an ajax call to populate items
  }
},
于 2022-01-05T11:43:51.127 回答