Quasar SSR渲染前执行异步操作的实现方法

问题出在两个核心点：一是你直接修改普通对象的属性，useMeta无法感知到变化；二是Vue SSR不会自动等待beforeCreate钩子中的异步操作，会直接渲染初始状态。

以下是可行的解决方案：

方案1：使用Quasar的preFetch钩子（推荐） #

preFetch是Quasar专为SSR设计的数据预取钩子，当它返回Promise时，SSR会等待异步操作完成后再渲染组件。同时用reactive包装meta数据，确保修改时能触发响应式更新：

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

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

export default defineComponent({
  // SSR会等待这个异步钩子执行完成
  async preFetch () {
    // 替换为你的实际网络请求逻辑
    await delay(3000)
    this.metaData.title = 'title, initialized after a delay'
  },
  setup () {
    // 用reactive包装，让meta数据具备响应式
    const metaData = reactive({
      title: 'title initial value',
      titleTemplate: title => `The title is: ${title}`,
      meta: {
        ogTitle: {
          property: 'og:title',
          template (ogTitle) {
            return `${ogTitle} - My OG Website`
          }
        }
      }
    })
    useMeta(metaData)
    // 暴露给preFetch钩子使用
    return { metaData }
  },
  name: 'IndexPage'
})
</script>

方案2：使用异步setup函数 #

如果你的Quasar版本支持异步setup，也可以直接在setup中完成异步操作，同样需要保证meta数据的响应式：

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

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

export default defineComponent({
  async setup () {
    const metaData = reactive({
      title: 'title initial value',
      titleTemplate: title => `The title is: ${title}`,
      meta: {
        ogTitle: {
          property: 'og:title',
          template (ogTitle) {
            return `${ogTitle} - My OG Website`
          }
        }
      }
    })
    useMeta(metaData)

    // 等待异步操作完成后更新meta
    await delay(3000)
    metaData.title = 'title, initialized after a delay'

    return {}
  },
  name: 'IndexPage'
})
</script>

关键说明 #

1. 响应式数据：必须用reactive或ref包装meta配置对象，否则修改属性时useMeta无法触发更新，SSR最终还是会渲染初始值。
2. SSR异步等待：只有通过preFetch或异步setup这类框架认可的方式，SSR才会等待异步操作完成，确保生成的HTML包含最新的meta内容。

内容的提问来源于stack exchange，提问作者goodson