如何在类星体渲染前进行异步

Question

在我的vue应用程序中，我希望meta标签的内容是网络请求的结果。为了完成这项工作，我正在学习类星体使我的应用程序部分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.conf.js文件中设置ssr: true选项来使用类星体中的asyncData方法。然后，您可以在Vue组件中使用asyncData方法，如上面的示例所示。

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