SSR页面动态内容SEO无法抓取怎么办？

轩辕圣恩提问于 2026-02-14 17:06:31 阅读 9

优化

我在用Next.js做SSR优化时遇到个奇怪的问题。页面用getStaticProps请求了API数据，本地开发和生产环境访问都能正常显示动态内容，但Google Search Console里显示抓取的HTML里这部分数据全是空的。已经检查过SSG配置和meta标签都没问题，甚至用curl模拟爬虫请求也看到数据正常渲染了。

搞不懂的是为什么SEO工具（比如Screaming Frog）抓取时这部分内容就消失了？是不是SSR生成的静态文件没包含异步数据？尝试过在export async function getStaticProps()里加了setTimeout模拟延迟，结果反而能被抓取到，这说明什么问题呢？

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { items: data }, revalidate: 10 };
}

SEO优化

我来解答赞 5 收藏

反馈

1 条解答

篷蔚 Dev Lv1

这个问题其实挺常见的，尤其是在用 Next.js 做 SSR 或 SSG 的时候。看起来你的问题核心是：SEO 工具抓取页面时，动态内容没有被正确渲染到 HTML 中。这可能和 Next.js 的静态生成机制、API 数据的获取时机，以及爬虫的行为有关。下面我来一步步帮你分析和解决。

首先你要明确的是，getStaticProps 是 Next.js 用来做静态生成（SSG）的方法，它的特点是会在构建时预先生成静态 HTML 文件。也就是说，当你运行 next build 的时候，Next.js 会调用 getStaticProps 方法，把返回的数据嵌入到静态文件中。如果这个过程出问题了，那么最终生成的 HTML 就会缺少动态数据，导致 SEO 工具抓取不到这些内容。

第一步：检查 API 请求是否在构建时成功
你需要确认 getStaticProps 中的 API 请求在构建时是否能正常完成。因为很多开发者容易忽略一个问题：有些 API 在开发环境下可以正常访问，但在构建环境中可能由于网络限制、认证问题或者环境变量配置错误而失败。

你可以通过在 getStaticProps 中加一些日志输出来确认：

export async function getStaticProps() {

  console.log('Fetching data from API...');

  const res = await fetch('https://api.example.com/data');

  if (!res.ok) {

    console.error('API request failed:', res.status, res.statusText);

    return { props: { items: [] }, revalidate: 10 };

  }

  const data = await res.json();

  console.log('Data fetched successfully:', data);

  return { props: { items: data }, revalidate: 10 };

}

如果你发现构建时 API 请求失败了，那问题就出在这里。你需要确保 API 地址在构建环境中是可访问的，比如使用绝对路径而不是相对路径，或者检查环境变量是否正确配置。

第二步：理解 revalidate 的作用
你代码里用了 revalidate: 10，这表示启用了增量静态生成（ISR）。也就是说，页面会在第一次请求后每 10 秒重新生成一次。但这里有个关键点：在构建时生成的初始静态文件中，必须包含完整的数据。如果构建时数据为空，那么即使 ISR 后续更新了数据，SEO 工具抓取到的仍然是空的内容。

所以，你需要确保构建时的数据是完整的。如果 API 数据在构建时不可用，你可以考虑在构建时使用 mock 数据，或者延迟部署直到数据准备好。

第三步：模拟爬虫行为测试
你提到用 curl 模拟爬虫请求时能看到数据正常渲染，但 SEO 工具抓取时却看不到。这可能是因为 SEO 工具的行为和普通爬虫不太一样，它们可能会设置特定的 User-Agent 或者其他请求头。你可以用以下命令模拟更真实的爬虫行为：

curl -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" https://your-site.com

如果这时候抓取到的 HTML 中仍然没有数据，那说明问题还是出在静态文件生成阶段。

第四步：尝试用 getServerSideProps 替代
如果以上方法都解决不了问题，你可以考虑用 getServerSideProps 替代 getStaticProps。两者的区别在于，getServerSideProps 是在每次请求时动态生成页面，而不是在构建时生成静态文件。这样可以确保 SEO 工具抓取时总是能拿到最新的数据。

代码改写如下：

export async function getServerSideProps(context) {

  const res = await fetch('https://api.example.com/data');

  const data = await res.json();

  return { props: { items: data } };

}

不过需要注意的是，getServerSideProps 会增加服务器的负载，因为它每次都需要实时请求 API。如果你的页面访问量很大，可能需要权衡一下性能和 SEO 的需求。

第五步：排查构建环境的问题
有时候问题并不是代码本身，而是构建环境的问题。比如，CI/CD 环境中可能缺少某些依赖，或者构建脚本执行顺序有问题。你可以试着在本地运行 next build && next export，然后检查生成的静态文件中是否有数据。

如果本地没问题，但线上有问题，那就需要检查 CI/CD 配置了。看看是不是构建过程中有网络超时、API 不可用等问题。

总结一下
1. 首先确认 getStaticProps 中的 API 请求在构建时是否成功。
2. 确保构建时生成的静态文件中包含完整的数据。
3. 如果问题依然存在，可以尝试用 getServerSideProps 替代。
4. 最后排查构建环境的配置问题。

希望这些步骤能帮你解决问题！如果还有疑问，可以继续讨论。

2026-02-14 19:04