Quasar SSR应用中Meta标签未在服务端渲染问题排查

你的Quasar SSR应用中，useMeta设置的标题未出现在初始HTML源码中，核心原因是服务器端渲染阶段，Quasar未正确捕获到useMeta设置的meta信息。虽然其他SSR功能正常，但useMeta的调用方式或配置存在疏漏，导致服务器端生成HTML时未注入这些meta标签。

1. 确认Meta插件已启用 #

首先检查quasar.config.js，确保framework.plugins中包含'Meta'，这是SSR下meta功能生效的前提：

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    framework: {
      plugins: ['Meta'], // 必须添加这一行
      // 其他框架配置
    },
    build: {
      ssr: true, // 确保SSR已开启
      // 其他构建配置
    }
  }
})

2. 修改useMeta调用为函数式形式 #

将直接传递对象改为返回meta对象的函数，确保服务器端渲染时能正确执行并收集meta信息：

<script setup lang="ts">
import { preFetch } from 'quasar/wrappers'
import { useMeta } from 'quasar';
import { useHomeMediaStore } from 'src/stores/home-page';

defineOptions({
  preFetch: preFetch(async ({ store }) => {
    return useHomeMediaStore(store).getMedia()
  })
})

// 改为函数式返回
useMeta(() => ({
  title: 'I am cute website ',
}))
</script>

3. （可选）依赖异步数据时在preFetch中设置meta #

如果标题需要依赖preFetch获取的数据，可以直接在preFetch中通过ssrContext设置meta，确保服务器端生成HTML时已注入：

<script setup lang="ts">
import { preFetch } from 'quasar/wrappers'
import { useHomeMediaStore } from 'src/stores/home-page';

defineOptions({
  preFetch: preFetch(async ({ store, ssrContext }) => {
    const mediaData = await useHomeMediaStore(store).getMedia();
    // 服务器端上下文存在时设置meta
    if (ssrContext) {
      ssrContext.meta = {
        title: 'I am cute website ',
        // 可添加其他meta标签，如description等
      };
    }
    return mediaData;
  })
})
</script>

修改后重启SSR服务，查看页面源码，应该能在<head>标签中看到设置的标题<title>I am cute website </title>。

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