React JS - 谷歌爬虫无法爬取页面答案

【问题标题】：React JS - Google crawlers not able to crawl the pagesReact JS - 谷歌爬虫无法爬取页面
【发布时间】：2021-09-13 16:30:11
【问题描述】：

为了 SEO 目的，我可以让内置 React JS 的网络应用程序为 Google Crawlers 工作的最佳方法是什么？我希望整个页面都能够抓取。

基本上问题在于它在客户端呈现时，爬虫除了根 div 之外什么都看不到。

应用程序托管在 S3 存储桶上，并使用云端作为服务器。我已经阅读了有关 Lambda@Edge 的信息，但不确定这是否可行。

救命！

【问题讨论】：

NextJS 可能是目前最流行的东西。一般概念称为“服务器端渲染”（SSR）或“服务器端生成”（SSG）。 Gatsby 在生成文档或博客等静态网站方面也很受欢迎——两者都使用 React。
这是否意味着我必须使用 next.js 重新构建它，或者我们可以在其中插入 next.js 并且预渲染将开始工作？
这是一个小的重建——你将能够保留你所写的大部分内容，但你需要使它适合 NextJS——它有一些我不会在这里讨论的规则。这里的问题是你的要求之一是 SEO，所以你应该在第一天就做出这个决定。谷歌声称能够抓取客户端呈现的网站，但正如你所看到的，它不是 100%，而且他们没有分享如何让它变得更好。最好的办法是使用 Next.JS。

标签： reactjs aws-lambda single-page-application amazon-cloudfront google-crawlers

【解决方案1】：

如何解决这个问题在很大程度上取决于您的要求和具体情况。如果您的页面不经常更改，您可以自动创建它的静态版本并将其托管在 S3 上。

Lambda@Edge 可以检查用户代理，如果它检测到机器人，则将请求重定向到您页面的静态版本。其他请求和以前一样处理。

创建此类页面的静态版本的一个选项是使用Puppeteer。您可以将 Puppeteer 与 AWS Lambda 一起使用。因此，您可以构建一个获取 URL 的 Lambda 函数，然后将 HTML 放入 S3 存储桶中。然后，您编写一个 Step Function 来为您的所有页面执行此操作，每天通过 EventBridge 等触发。

另一种选择是在部署新版本的项目等后调用 Step Function。

有很多方法可以解决这个问题。但所有这些选项都可能涉及某种爬虫，它将页面“渲染”为静态 HTML 文件。

【讨论】：