在 Vue 3 + Nuxt 3 项目中，需将富文本 API 请求从 onMounted 迁移至服务端预取逻辑（如 useFetch），确保 HTML 内容在首屏直出时即存在于 DOM 和源码中，从而满足 SEO 与搜索引擎爬虫需求。
在 vue 3 + nuxt 3 项目中，需将富文本 api 请求从 `onmounted` 迁移至服务端预取逻辑（如 `usefetch`），确保 html 内容在首屏直出时即存在于 dom 和源码中，从而满足 seo 与搜索引擎爬虫需求。
在传统 Vue SPA 中，若将 API 调用写在 onMounted() 中，内容仅在客户端挂载后异步渲染，导致服务端返回的 HTML 源码为空白 <div>，严重损害 SEO —— Googlebot 等爬虫无法索引动态注入的 HTML。而 Nuxt 3 提供了开箱即用的 SSR/SSG 支持，关键在于<strong>将数据获取逻辑提前至组件初始化阶段，并由服务端执行</strong>。<p>正确做法是使用 Nuxt 3 内置的 <code>useFetch（或 useAsyncData），它会在服务端自动预取数据，并将结果序列化为 __NUXT__ 状态注入 HTML，客户端直接 hydration，无需二次请求：
<template>
<div class="text" v-if="text" v-html="text"></div>
<div v-else class="loading">加载中...</div>
</template>
<script setup>
const { data: text, pending, error } = await useFetch('/api/texts', {
params: { url: 'xxx' },
// 可选：设置错误重试、超时等
default: () => '',
server: true, // 明确启用服务端获取（默认为 true）
immediate: true
})
// 错误处理示例
if (error.value) {
console.warn('富文本加载失败:', error.value)
}
</script>✅ 关键要点：
-
useFetch必须在<script setup></script>顶层await，不可包裹在onMounted或事件回调中； -
v-html渲染前务必校验text非空（v-if="text"），避免 XSS 风险和空白占位； - 若 API 返回的是未经转义的 HTML，请确保后端已做过安全过滤（如使用 DOMPurify），切勿直接信任并渲染用户可控内容；
- 在纯 Vue 3（非 Nuxt）项目中无法原生支持 SSR，需搭配 Vite-SSG、Vue Server Renderer 等方案，复杂度显著上升 —— 推荐直接采用 Nuxt 3。
最终生成的 HTML 源码中，<div class="text">...</div> 将包含真实内容，可被搜索引擎完整抓取，真正实现「所见即所索」。
立即学习“前端免费学习笔记（深入）”；
