众所周知，优化单页应用程序的搜索引擎并非易事，其解决方案可能需要大量的人工成本，开发人员的特殊技能以及客户的财务成本。 社区提供了哪些解决方案，以使
React网站搜索引擎尽快友好并尽可能便宜地进行？
关于SEO的一些常识
大约92％的流量来自搜索引擎查询结果的第一页 ，其中75％的流量来自前五个网站。
Google占据了搜索引擎市场90％以上的份额 。
搜索引擎优化（SEO）是一种结构化和组织网站的过程，目的是通过增加其在搜索引擎结果中的位置和出现频率来增加流量并提高其流量的质量，重点是显示网站细节的关键字。
SEO流程的主要目标是提高网站在Internet上的可见性并增加网站流量。
搜索引擎基于对网站内容的不懈缓存。 由于该过程是自动化的，因此以机器可理解的方式对内容进行结构化和格式化非常重要。 SEO流程包括优化网站的性能，处理其内容以增加内容与关键字的相关性，以及为网站提供工具以帮助搜索机器人理解它。
这看起来似乎很简单，但是在基于React的站点上，情况并非总是如此。
React和SEO
SPA简介
单页应用程序或SPA是通过动态更改当前页面而不是从服务器加载新页面来与用户交互的Web应用程序或网站。 SPA工作很快，因为 大多数资源（HTML + CSS +脚本）在其生命周期内仅加载一次。 该应用程序仅接收和返回数据。
可以用来创建SPA的技术示例之一是ReactJS ，它是为在自定义浏览器上工作而进行了优化的库（ 更多信息请 参见 此处）。
SEO的主要SPA问题
实际上，SPA是在浏览器中运行的JavaScript程序，如果搜索网络机器人不知道如何执行脚本，它将无法获得正确呈现的页面并对其进行索引。
Google在2015年10月发表了重要声明，称其机器人将在获得许可的情况下在网站上运行JS文件。 而且，尽管这句话听起来很肯定，并且其搜索机器人越来越复杂，但依靠其执行JavaScript的能力还是有风险的 。 Googlebot可以出于多种原因拒绝JavaScript（ 此处有更多详细信息 ）：
- 不遵守“黄金5秒”规则（ 此处和此处有更多详细信息）；
- 无法抓取网站：根据网站的结构，Google系统应该能够抓取网站（更多详细信息，请参见此处）；
- 无法分析网站：Google系统在使用网站网页构成技术对网站进行分析时不应遇到问题（更多信息请参见此处）；
- 代码中的错误等
来自其他搜索引擎（例如Yahoo，Bing，Baidu等）的漫游器不支持JavaScript，并且SPA页面空白。
出于这些原因，您必须寻找在服务器端呈现SPA站点的方法，以便为搜索机器人提供有机会以正确的形式查看其内容。
SPA网站的SEO解决方案
解决 SPA网站面临的SEO问题的主要方法有两种 ：
- 同构（通用）SPA；
- 预渲染。
用于React网站的
其他 SEO改进
工具 ：
同构React如何帮助SEO？
同构React网站会自动检测是否禁用了客户端JavaScript。 如果禁用了JavaScript，则脚本将在服务器上执行，并将结果（静态HTML + CSS）发送到客户端。 在这种情况下，SEO所需的所有属性和内容都会在启动时出现。
如果启用了JavaScript，则最简单的同构React网站可以在浏览器中呈现所有内容时巧妙地加载，或者巧妙地 ：在服务器端执行部分呈现，这意味着仅在服务器上执行第一个DOM呈现，而所有后续的DOM呈现都直接在服务器中执行浏览器 换句话说，浏览器接收完全呈现的原始DOM和JavaScript，并且当应用程序状态更改时，它负责所有后续更新。
人们认为，同构解决方案是解决SPA Web应用程序SEO问题的最佳方法，但不幸的是，目前， 这样的React SPA解决方案难以实施 ：
- 流行的React样板，例如create-react-app ， react-boilerplate不支持同构。 create-react-app的开发者Dan Abramov ：
最终，很难在没有做出关键决定的情况下以有意义的方式添加服务器端渲染。 目前，我们不会做出这样的决定；
- 现有的同构样板很难学习；
- 现有解决方案并不完善：
- 服务器和客户端上的代码通常有很多差异；
- 在代码库几乎完全重合的情况下，代码会变慢并易于失败。
在“同构React应用程序：性能和扩展”一文的讨论中，似乎许多开发人员都会支持MrCheater的观点 ：
“同构Web应用程序”的主题有很多讨厌之处。 las 尽管很容易理解为什么，但是关于此主题的数百篇文章却很难编写，但是输出仍然是一个可怕的客户端，重达3兆字节。 但是很快有一天，所有的问题和解决方案将被标准化，我们将拥有轻量的同构单页应用程序。
通过渲染解决SEO问题
预渲染是对网站上的页面进行预渲染以准备好供搜索网络机器人查看的过程。 预渲染服务截取到网站的请求，通过“用户代理”请求确定客户端的类型，如果该请求是由Web机器人发出的，则该服务将发回先前渲染的站点的静态静态版本。 如果请求是由非搜索网络机器人发出的，则将加载正常页面。 预渲染仅用于优化与网络bot以及可能已经过时的浏览器的工作。 Prerender.cloud之类的Prerender服务使用无头浏览器，最常见的是Headless Chrome 。 这种方法使您可以使用最新的JavaScript框架（例如React，Ember和Angular）来构建网站，而不必依赖服务器端渲染。
预渲染的优点：
- 预渲染器能够执行所有类型的现代JavaScript并生成静态HTML；
- prerender支持最新的Web创新；
- 如果需要的话，只需对Web应用程序的代码库进行最少的修改 ；
- 网站开发和维护成本降低 ;
- 易于实施。
预渲染的缺点 ：
- 不适合显示经常变化的数据的页面；
- 包含用户个人数据的页面不可接受。 但是，这样的页面对于SEO并不是很有用，因此不应该建立索引。
- 对于具有大量页面的大型站点，预渲染过程可能会花费大量时间；
- 预渲染服务是付费的。
渲染，在哪里得到它们
社区已经开发出许多新产品：例如， 在这里。
在许多选项中， OpenSource Prerender很有趣-prerender.io服务上使用的prerender的 开源版本 ，可以在支持Node.js的服务器上实现。
另一个有趣的事情是，它不需要服务器，而 Prerender是Prerender SPA插件 ，只需修改webpack.config.js（例如， create-react-app或react-boilerplate）就可以连接它 。 预渲染过程是在“构建”网站的过程中执行的，结果被放置在index.html中。
您可以使用提供预渲染服务的现成服务， 此处 和此处列出了其中的一些服务。
在这里，您还可以了解使用Prerenders的实践经验。
特别令人感兴趣的是Roast.io服务，该服务同时提供CDN和预渲染服务（！） 。 该服务还会自动（如果没有）添加“截屏链接展开”元标记，以改善网站在社交网络上的显示。
该服务位于AWS CDN上 ，运行在HTTPS协议上，尤其是为SPA和React配置的 ，非常易于使用。 有一个免费的托管选项（10GB带宽，500页SSR）。
因此：
预渲染并不是理想的解决方案，它对于React应用程序开发人员的很大一部分来说似乎更可取 ，原因是：
- 不需要完成应用程序代码-您可以安全地使用自己喜欢的样板；
- 有多种实现方式-“中间件”，“ webpack”，“ CDN +预渲染”，“开源”和付费；
- 引入预渲染是一个简单的过程，尤其是在“ CDN +预渲染”实现的情况下；
- Google以Headless Chrome的形式提供了认真的支持;
- 应用程序开发和支持成本降低了。
- 有一些免费使用预渲染Web服务的选项。
但是 ，如果出现以下情况，则需要考虑网站的同构（通用）版本 ：
- Web应用程序显示频繁更改的数据；
- Web应用程序包含数百个页面，因为预渲染过程会花费大量时间。
如果网站仅包含静态页面 （HTML + CSS），则不需要同构或预渲染。