如何让Google爬虫识别Nuxt3异步加载内容？服务端加载方法问询

你的问题核心在于客户端异步请求的数据无法被搜索引擎爬虫抓取。Google的爬虫虽然能执行部分JS，但对于mounted钩子中延迟加载的内容，大概率会在快照生成时还没完成渲染，最终只抓取到占位符，直接影响SEO排名。所以必须通过服务端预加载数据，让页面首次加载时就包含完整的文章内容。

Nuxt 3提供了多种适配服务端/预渲染的方案，以下是最适合博客场景的几种：

1. 使用 useAsyncData（推荐） #

这是Nuxt 3官方主推的数据获取方式，会在服务端或构建阶段预获取数据，直接把数据注入到页面HTML里，爬虫能直接读到完整内容。

示例代码：

<template>
  <div v-if="loading">加载中...</div>
  <article v-else>
    <h1>{{ article.title }}</h1>
    <div v-html="article.content"></div>
  </article>
</template>

<script setup>
import axios from 'axios'

// 替换成你的CMS接口，路由参数根据实际情况调整
const { data: article, pending: loading } = await useAsyncData('article', async () => {
  const res = await axios.get(`https://your-cms-api.com/articles/${route.params.id}`)
  return res.data
})
</script>

• 说明：useAsyncData会自动处理缓存、重复请求，服务端执行时会把数据序列化到页面中，无需客户端再发起请求。
• 提示：也可以用Nuxt内置的$fetch替代Axios，适配服务端环境的效果更好。

2. 使用 useFetch #

useFetch是useAsyncData和$fetch的封装，语法更简洁：

<template>
  <div v-if="loading">加载中...</div>
  <article v-else>
    <h1>{{ article.title }}</h1>
    <div v-html="article.content"></div>
  </article>
</template>

<script setup>
const { data: article, pending: loading } = await useFetch(`https://your-cms-api.com/articles/${route.params.id}`)
</script>

3. 服务端专属：useServerFetch #

如果你的请求需要隐藏敏感信息（比如API密钥），可以用useServerFetch——它只会在服务端发起请求，数据同样会注入到页面：

<script setup>
const { data: article } = await useServerFetch(`https://your-cms-api.com/articles/${route.params.id}`, {
  headers: {
    'Authorization': `Bearer ${process.env.CMS_API_KEY}` // 服务端安全读取环境变量
  }
})
</script>

修改完成后，用这两种方式确认效果：

• 打开Google Search Console的「URL检查工具」，重新抓取页面查看快照，确认完整文章内容已被抓取
• 右键页面→查看源代码，直接检查HTML里是否包含文章内容，而不是只有占位符

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