nuxt怎么把后端请求回来的数据插入到页面源码中？

项目使用nuxt3写的，使用generate打包成html文件，但是比如我有个文章列表，文章详情页面，列表请求回来的数据，点击nuxt-link之后带文章id进入到文章详情页面，详情页使用useAsyncData

const { data } = await useAsyncData(
  'get',
  () => $fetch(`https://webapi.yinghuasuan.com/website/article/detail?id=${route.params.id}`, {
    data: {
    }
  })
)

请求数据，第一次进入页面，鼠标右键查看网页源码，里面并没有后端返回的数据，但是刷新一下再查看源码，里面就有了。但是我想第一次进来就有。英语不好，看着太费劲了。有没有大佬指导一下？

下边是nuxt.config.ts文件，就基本配置。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  sourcemap: {
    server: false,
    client: false
  },
  // build: {
  //   analyze: {
  //     analyzerMode: 'static'
  //   }
  // },
  // buildDir: 'dist',
  devtools: { enabled: false },
  css: ['~/assets/magic.min.css', '~/assets/main.scss'],
  app: {
    head: {
      title: '影划算官网 - 特惠电影票服务商，提供一站式电影票营销解决方案。',
      meta: [
        { name: 'keywords', content: '影划算电影票,影划算票务,电影票接口,电影票API,电影票SaaS系统,电影票小程序,特价影票,5折电影票,特惠电影票,电影票学生价,电影票订购平台' },
        { name: 'description', content: '影划算电影票提供全国电影院在线购票服务系统搭建，独立研发特价电影票优惠购票SaaS系统，支持微信/支付宝小程序系统搭建，自主品牌OEM、多种营销模式、分销系统实时结算，并提供开放平台API接口技术对接。' }
      ]
    }
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "~/assets/base.scss" as *;`
        }
      }
    }
  },
  nitro: { minify: true, compressPublicAssets: true }
})