I am facing a challenge in my vue app where I need the contents of a meta tag to be fetched from a network request. I am exploring quasar for partial SSR implementation, but I am struggling to find a way to execute asynchronous tasks before the server-side rendering completes.
Here is a minimal reproducible example that highlights the issue. I attempt to introduce a delay using a promise and then update a value in the metaData object below....
<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>
I have confirmed that beforeCreate is being executed, but it seems like the server-side rendering continues before the asynchronous task within await is completed. Therefore, the initial value for title ends up in the client's tag instead of the desired one.
Is there a method to utilize SSR while executing asynchronous operations before rendering?