本文介绍如何在 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 环境）：
<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 数据流支持。
总结：SSR 友好的 HTML 渲染 ≠ 客户端动态插入，而在于「数据与模板在服务端完成结合」。借助 useFetch 的服务端预执行能力，配合 v-html 的声明式渲染，即可兼顾安全性、性能与 SEO —— 这正是现代 Vue 全栈框架的核心优势所在。
