SSR页面静态化后，为什么动态内容SEO抓取不到？

Prog.文婷提问于 2026-02-02 13:45:35 阅读 35

优化

我最近在Vue项目里用了Vue Server Renderer做SEO优化，首页通过API获取的轮播图数据在浏览器能正常显示，但用Google Search Console检查时发现HTML源码里这部分数据完全没渲染出来，这是什么问题啊？

我按照文档在入口文件里写了这样的服务端代码：


app.use(async (req, res) => {
  const app = createApp();
  await app.fetchComponentData(req.url);
  const html = renderer.renderToString(app);
  res.send('<!DOCTYPE html>' + html);
});

页面加载时轮播图数据是通过nextTick获取的，但预渲染的时候可能没等数据回来？我试过加setTimeout延时，但生产环境部署后控制台还报404错误：


GET http://example.com/api/carousel 404 (Not Found)

本地开发服务器能正常请求这个API端点，生产环境Nginx配置也没问题，搞不懂为啥还是没效果…

SEO优化 SSR方案

我来解答赞 6 收藏

反馈

2 条解答

A. 国凤 Lv1

你这个问题很典型，属于 SSR 没等接口数据返回就直接渲染了。Vue Server Renderer 本身不会等组件里的 nextTick 或异步接口，所以你在前端看到轮播图正常，但搜索引擎抓源码的时候就是空的。

你现在的代码流程太简单粗暴，没处理异步数据加载。给你一个能用的方案：

在你的入口 server.js 里，组件创建后要显式地等数据返回。比如你用了 vue-router 和 vuex，可以在路由 resolve 之后 dispatch 数据：

app.use(async (req, res) => {

  const { app, router, store } = createApp();

  router.push(req.url);



  await new Promise((resolve, reject) => {

    router.onReady(() => {

      const matchedComponents = router.getMatchedComponents();

      if (!matchedComponents.length) {

        return reject({ code: 404 });

      }



      Promise.all(matchedComponents.map(component => {

        if (component.asyncData) {

          return component.asyncData({ store });

        }

      })).then(resolve).catch(reject);

    });

  });



  const html = renderer.renderToString(app);

  res.send(${html});

});

然后在你的首页组件里暴露 asyncData 方法去拉轮播图数据：

export default {

  data() {

    return {

      carouselList: []

    };

  },

  asyncData({ store }) {

    return store.dispatch('fetchCarousel');

  }

};

这样 SSR 渲染时就会等接口返回后再吐 HTML，Google Search Console 拿到的源码里就能看到轮播图的数据了。

至于你那个 404 的问题，检查一下生产环境的 API 请求域名是不是没配对，比如你本地开发是 localhost，生产可能要用 http://api.example.com/carousel，Nginx 要能代理这个路径。别把前端路由和接口路由搞混了。

代码给你了，照着改吧，改完再看效果。这搞法我之前项目里天天用，没问题。

2026-02-07 14:07

设计师英洁 Lv1

问题出在你的动态数据获取方式上。服务端渲染的关键在于，所有需要展示的数据必须在服务端渲染阶段就准备好，不能等到客户端再异步去取。

你看，你现在的做法是用 nextTick 去拿数据，这种方式本质上还是异步的，服务端直接把你还没来得及填充数据的模板渲染成了HTML字符串返回了。等Google爬虫拿到这个HTML的时候，轮播图数据确实还没被填充进去。

推荐的做法是，在服务端渲染阶段就同步把API数据取回来。你可以修改你的 fetchComponentData 方法，让它变成一个真正的同步调用。比如说，使用 Node.js 的 HTTP 模块或者 axios 直接在服务端发起请求：

app.use(async (req, res) => {

  const app = createApp();



  // 在服务端直接同步获取数据

  const carouselResponse = await axios.get('http://example.com/api/carousel');

  app.carouselData = carouselResponse.data;



  await app.fetchComponentData(req.url);

  const html = renderer.renderToString(app);

  res.send('<!DOCTYPE html>' + html);

});

另外，生产环境报404的问题，很可能是你的API路径没配对。建议检查一下Nginx的反向代理配置，确保 /api 前缀的请求能正确转发到后端服务。

最后提醒一下，虽然可以加延时等待数据加载，但这不是个好办法。服务端渲染本身就是为了提升首屏加载速度，如果加延时反而会拖慢整体性能。按照上面的方法改完之后，应该就能正常抓取到动态内容了。

2026-02-02 14:05