渲染前如何在類星體中進行異步

Question

在我的 vue 應用程序中，我希望元標記的內容是網絡請求的結果。 為了完成這項工作，我正在學習類星體以使我的應用程序部分 SSR，但我無法弄清楚如何在服務器端渲染完成之前運行一些異步的東西。

這是隔離問題的一點 MRE。 我嘗試延遲承諾，然后在下面的元數據中設置一個值metaData

<script>
import { defineComponent } from 'vue'
import { useMeta } from 'quasar'

const metaData = {
  // sets document title
  title: 'title initial value',

  // optional; sets final title as "Index Page - My Website", useful for multiple level meta
  titleTemplate: title => `The title is: ${title}`,

  // meta tags
  meta: {
    // note: for Open Graph type metadata you will need to use SSR, to ensure page is rendered by the server
    ogTitle: {
      property: 'og:title',
      // optional; similar to titleTemplate, but allows templating with other meta properties
      template (ogTitle) {
        return `${ogTitle} - My OG Website`
      }
    }
  }
}

const delay = time => new Promise(resolve => setTimeout(resolve, time))

export default defineComponent({
  async beforeCreate () {
    await delay(3000)
    // I want this to be in the rendered page
    metaData.title = 'title, initialized after a delay'
  },
  setup () {
    useMeta(metaData)
  },
  name: 'IndexPage'
})
</script>

我已經證明beforeCreate正在執行，但我認為正在發生的事情是它在await上返回一個承諾，而 SSR 只是向前推進。 title的初始值最終出現在客戶的標簽中，而不是我想要的。

有沒有一種方法可以使用 SSR 但在渲染之前做一些異步工作？

Answer 1

在服務器端呈現的 Vue 應用程序中處理異步數據的一種方法是使用asyncData方法。 在服務器端呈現發生之前調用此方法。 它允許您執行異步操作。

例如：

export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }

您可以通過在 Quasar 應用程序的quasar.conf.js文件中設置ssr: true選項來使用 Quasar 中的asyncData方法。 然后，您可以在 Vue 組件中使用asyncData方法，如上例所示。

更多信息： https ://nuxtjs.org/docs/features/data-fetching/#async-data