nuxt3 怎么使用useAsyncData()或useFetch()方法请求接口数据，让数据可以在网页原代码上可见？

Question

nuxt3使用什么方法才能将请求到的数据显示在网页源代码上，方便seo爬虫。
我试过两种方法都不能显示在网页源代码上。
方法一：使用useFetch()方法请求接口数据，打开网页源代码不显示请求到的数据，其他静态数据都显示。
方法二：使用useAsyncData()方法请求数据。

const { data: lists, error } = (await useAsyncData("worksLists", () =>
  $fetch("https://xxx/api/works/list", {
    method: "post",
  })
)) as any;

<div v-if="lists.data.total > 0">
  <div class="title">
    <div>已发表作品</div>
  </div>
  <List
    :width="'allWidth'"
    :lists="lists.data.list"
    :show-cert="true"
    @get-total="getTotal"
  ></List>
</div>

将useAsyncData请求到的data:lists放到页面上，但是一保存就显示500 window is not defined. 一删除 lists.data.total 和 lists.data.list 就又好了。但是很奇怪的一点是我直接用一个div包裹lists.data.list又可以显示数据（也就是

{{ lists.data.list }}

这样），并且查看网页源代码也有这些接口数据。想问一下怎么解决。

Answer 1

nuxt3 中有几种方式可以将接口数据渲染到页面并显示在页面源代码中:
1. 使用 asyncData 或 fetch
这两种方法可以在服务端预取数据,这样数据就会被序列化到页面 HTML 中。
js
export default {
  async asyncData() {
    const { data } = await fetchXXX() 
    return {
      posts: data 
    }
  }
}
2. 使用计算属性获取数据
计算属性也可以实现将数据预取并展示在页面源代码中。
js
export default {
  data() {
    return {
      posts: []
    }
  },

  computed: {
    fetchedPosts() {
      return this.fetchPosts() 
    }
  },
  
  methods: {
    async fetchPosts() {
      const { data } = await fetchXXX()
      return data
    }
  }  
}
3. 在 mounted 里获取数据
在 mounted 生命周期获取数据,这时还来得及将数据填充到页面中,同时也会体现在页面源码里。
js
export default {
  mounted() {
    this.fetchPosts()  
  },

  methods: {
    async fetchPosts() {
      const { data } = await fetchXXX()
      this.posts = data
    } 
  }
}
4. 使用 nuxt-ssr-middleware
可以通过这个模块在服务器端渲染前获取数据填充到页面中。
总之,关键是在服务端渲染前获取数据填充到页面,才能实现在页面源码中展示接口数据的效果。