如何在 Vue 3 中实现 SSR 友好的 HTML 内容渲染-html教程-PHP中文网

如何在 Vue 3 中实现 SSR 友好的 HTML 内容渲染

本文介绍如何在 Vue 3（尤其 Nuxt 3）中通过服务端预获取数据并安全渲染富文本，确保 v-html 内容出现在 HTML 源码中，满足 SEO 和搜索引擎抓取需求。

本文介绍如何在 vue 3（尤其 nuxt 3）中通过服务端预获取数据并安全渲染富文本，确保 `v-html` 内容出现在 html 源码中，满足 seo 和搜索引擎抓取需求。

在 Vue 3 单页应用（SPA）中，若将 API 请求写在 onMounted() 钩子中（即客户端挂载后才发起请求），返回的 HTML 内容必然仅在浏览器端动态插入——这导致服务端渲染（SSR）时 DOM 为空，源码中不包含实际文本，严重损害 SEO 效果。

要真正实现 SSR 友好，关键在于将数据获取提前至服务端或服务端优先阶段，而非依赖客户端生命周期。Nuxt 3 提供了开箱即用的 useFetch（或 useAsyncData）组合式 API，它会在服务端（或静态生成时）自动预执行请求，并将响应结果序列化注入初始 HTML，从而让 v-html 渲染的内容“原生”存在于页面源码中。

✅ 正确做法示例（Nuxt 3 环境）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<template><div class="text" v-if="text" v-html="text"></div>
  <!-- 注意：无需 v-if 亦可，但建议保留以避免空值渲染 -->
</template><script setup>
const { data: text } = await useFetch('/api/texts', {
  params: {
    url: 'xxx'
  }
})
// ✅ useFetch 在服务端自动 await，text 已是 SSR 时就确定的响应内容
</script>

⚠️ 重要注意事项：

useFetch 必须在 <script setup></script> 的顶层 await，不可包裹在 onMounted、onBeforeMount 或任何客户端钩子中；
确保 API 接口支持服务端调用（无 window/document 依赖，且 CORS 或服务端代理配置正确）；
v-html 存在 XSS 风险，务必确保后端返回的 HTML 经过严格清洗（如使用 DOMPurify 或服务端白名单过滤），切勿直接渲染用户可控内容；
若非 Nuxt 环境（如纯 Vite + Vue SSR），需手动配置 createSSRApp 并在服务端入口中预获取数据，复杂度显著提升；推荐优先采用 Nuxt 3 以获得开箱即用的 SSR 数据流支持。