React SEO策略和最佳实践
Vineet专注于构建数据可视化界面，并在他的项目中广泛使用React。他最喜欢的饮料是拉西。
React的开发是为了创建声明性、模块化和跨平台的交互式UI。今天，它是更流行的--如果不是最流行的--JavaScript框架之一，用于编写高性能的前端应用程序。React最初是为了编写单页应用程序（SPA）而开发的，现在被用来创建成熟的网站和移动应用程序。
如果你有丰富的传统Web开发经验，并转向React，你会注意到越来越多的HTML和CSS代码转移到JavaScript。这是因为React不建议直接创建或更新UI元素，而是描述UI的 "状态"。然后React会以最有效的方式更新DOM以匹配该状态。
因此，对UI或DOM的所有改变都必须通过 React的引擎进行。虽然对开发者来说很方便，但这可能意味着用户需要更长的加载时间，搜索引擎需要更多的工作来寻找和索引内容。
在这篇文章中，我们将讨论在构建具有SEO性能的React应用程序和网站时面临的挑战，我们将概述用于克服这些挑战的几种策略。
谷歌如何抓取和索引网页
谷歌收到90%以上的在线搜索。让我们仔细看看它的抓取和索引过程。
这个取自 谷歌文档的快照可以帮助我们。请注意，这只是一个简化的方框图。实际的谷歌机器人要复杂得多。
谷歌机器人索引网站的示意图。
需要注意的几点：
- Googlebot维护着一个抓取队列，其中包含它将来需要抓取和索引的所有URL。
- 当爬虫闲置时，它在队列中选取下一个URL，发出请求，并获取HTML。
- 在解析了HTML之后，Googlebot确定它是否需要获取和执行JavaScript来呈现内容。如果需要，该URL会被添加到一个渲染队列中。
- 在稍后的时间里，渲染器会获取并执行JavaScript来渲染页面。它把渲染好的HTML送回处理单元。
- 处理单元提取网页上提到的所有URL
<a> tags，并将它们添加到抓取队列中。 - 该内容被添加到谷歌的索引中。
请注意，解析HTML的处理阶段和执行JavaScript的渲染器阶段之间有明显的区别。
之所以存在这种区别，是因为考虑到谷歌机器人需要查看超过 130万亿个网页，执行JavaScript是很昂贵的。因此，当谷歌机器人抓取一个网页时，它会立即解析HTML，然后将JavaScript排到后面运行。谷歌的文档提到，一个页面在渲染队列中停留几秒钟，尽管可能更长。
还值得一提的是 抓取预算的概念。谷歌的抓取受到带宽、时间和谷歌机器人实例可用性的限制。它为每个网站的索引分配了特定的预算或资源。如果你正在建立一个有数千个页面的大型内容密集型网站（例如，一个电子商务网站），而且这些页面使用大量的JavaScript来渲染内容，那么谷歌可能会从你的网站上读取较少的内容。
注意：你可以 在这里阅读谷歌关于管理抓取预算的指南。
为什么优化React的SEO是有挑战性的
我们对Googlebot、爬行和索引的简要概述只触及了表面。然而，软件工程师应该找出搜索引擎在试图抓取和索引React页面时所面临的潜在问题。现在我们可以仔细看看是什么让React SEO具有挑战性，以及开发人员可以做什么来解决和克服其中的一些挑战。
空的第一遍内容
我们知道React应用程序严重依赖JavaScript，它们经常遇到搜索引擎的问题。这是因为React默认采用了一个 应用外壳模型。最初的HTML不包含任何有意义的内容，用户或机器人必须执行JavaScript才能看到页面的实际内容。
这种方法意味着Googlebot在第一次访问时检测到的是一个空页面。只有在页面被渲染时，谷歌才会看到内容。在处理成千上万的页面时，这将延迟内容的索引。
加载时间和用户体验
抓取、解析和执行JavaScript需要时间。此外，JavaScript可能需要进行网络调用以获取内容，而用户可能需要等待一段时间才能查看所请求的信息。
谷歌已经制定了一套与用户体验有关的 网络要素，在其排名标准中使用。较长的加载时间可能会影响用户体验得分，促使谷歌将一个网站排名降低。
我们在下一节中详细审查网站性能。
网页元数据
Meta<meta> 标签很有帮助，因为它们允许谷歌和其他社交媒体网站显示适当的标题、缩略图和页面描述。但是这些网站依靠获取的网页的<head> 标签来获得这些信息。这些网站不执行目标页面的JavaScript。
React在客户端渲染所有内容，包括元标签。由于应用程序外壳对整个网站/应用程序是相同的，因此可能很难为单个页面调整元数据。
网站地图
网站地图是一个文件，你在其中提供关于你网站上的页面、视频和其他文件的信息以及它们之间的关系。像谷歌这样的搜索引擎会读取这个文件，以便更智能地抓取你的网站。
React没有内置的方法来生成网站地图。如果你使用像React Router这样的东西来处理路由，你可以找到可以生成网站地图的 工具，尽管这可能需要一些努力。
其他SEO方面的考虑
这些考虑因素与建立良好的SEO实践有关：
- 有一个最佳的 URL结构，让人类和搜索引擎对页面上的内容有一个很好的了解。
- 优化robots.txt 文件可以帮助搜索机器人了解如何抓取你网站上的页面。
- 使用CDN来提供所有的静态资产，如CSS、JS、字体等，并使用 响应式图像来减少加载时间。
我们可以通过使用服务器端渲染（SSR）或预渲染来解决上述的许多问题。我们将在下面回顾这些方法。
进入同构式React
同构的字典定义是 "对应或类似的形式"。
在React术语中，这意味着服务器与客户端有相似的形式。换句话说，你可以在服务器和客户端重复使用相同的React组件。
这种同构方法使服务器能够渲染React应用，并将渲染后的版本发送给我们的用户和搜索引擎，这样他们就可以在后台加载和执行JavaScript时即时查看内容。
Next.js或 Gatsby等框架已经普及了这种方法。我们应该注意到，同构组件看起来与传统的React组件有很大不同。例如，它们可以包括在服务器上运行的代码，而不是在客户端。它们甚至可以包括API的秘密（尽管服务器代码在被发送到客户端之前就被剥离了）。
需要注意的一点是，这些框架抽象出了很多复杂性，但也引入了一种有主见的代码编写方式。我们将在本文中进一步挖掘性能的权衡。
我们还将做一个矩阵分析来了解渲染路径和网站性能之间的关系。但在此之前，让我们先了解一下衡量网站性能的一些基本知识。
网站性能的衡量标准
让我们研究一下搜索引擎用来给网站排名的一些因素。
除了快速、准确地回答用户的查询之外，谷歌认为一个好的网站 应该具有以下属性：
- 它应该快速加载。
- 用户应该能够在没有太多等待时间的情况下访问内容。
- 它应该尽早与用户的行动产生互动。
- 它不应该获取不必要的数据或执行昂贵的代码，以防止耗尽用户的数据或电池。
这些特征大致与以下指标相对应：
- TTFB: 到第一个字节的时间 - 从点击链接到第一个内容进来的时间。
- LCP: Largest Contentful Paint - 所请求的文章变得可见的时间。谷歌建议将这个值保持在2.5秒以下。
- TTI: Time To Interactive - 一个页面变得互动的时间（用户可以滚动、点击等）。
- 捆绑大小- 在页面变得完全可见和互动之前，下载和执行代码的总字节数。
我们将重新审视这些指标，以更好地理解各种渲染路径可能对它们中的每一个产生的影响。
接下来，让我们了解 React开发者可用的不同渲染路径。
渲染路径
我们可以在浏览器或服务器上渲染一个React应用，并产生不同的输出。
在客户端和服务器端渲染的应用程序之间，有两个功能变化很大，即路由和代码拆分。下面我们仔细看看这些。
客户端渲染（CSR）
客户端渲染是React SPA的默认渲染路径。服务器将提供一个不包含任何内容的外壳应用。一旦浏览器下载、解析并执行包含的JavaScript源，HTML内容就会被填充或渲染。
路由功能是由客户端应用程序通过管理浏览器历史记录来处理的。这意味着，无论请求哪种路由，都会提供相同的HTML文件，而客户端在渲染后会更新其视图状态。
代码拆分是相对简单的。你可以使用动态导入或 React.lazy来拆分你的代码，这样就可以根据路由或用户操作，只加载需要的依赖关系。
如果页面需要从服务器上获取数据来渲染内容--例如，博客标题或产品描述--它只能在相关组件被加载和渲染时才可以这样做。
在网站获取额外数据时，用户很可能会看到一个 "加载数据 "的标志或指示器。
带有引导数据的客户端渲染（CSRB）
考虑与CSR相同的情况，但不是在DOM渲染后获取数据，而是说服务器将相关数据引导到所提供的HTML中。
我们可以包括一个看起来像这样的节点：
<script id="data" type="application/json">
{"title": "My blog title", "comments":["comment 1","comment 2"]}
</script>
并在组件安装时对其进行解析：
var data = JSON.parse(document.getElementById('data').innerHTML);
我们刚刚为自己节省了一次往返服务器的时间。我们将在稍后看到其中的利弊。
服务器端对静态内容的渲染（SSRS）
想象一下，我们需要即时生成HTML的场景。
例如，如果我们正在建立一个在线计算器，而用户发出了一个类似于*/calculate/34+15*的查询（撇开URL转义）。我们需要处理这个查询，评估其结果，并以生成的HTML作为回应。
我们生成的HTML结构相当简单，一旦生成的HTML被提供，我们不需要React来管理和操作DOM。
所以我们只是提供HTML和CSS内容。你可以使用renderToStaticMarkup 方法来实现这一点。
路由将完全由服务器处理，因为它需要为每个结果重新计算HTML，尽管可以使用CDN缓存来更快地提供响应。浏览器也可以对CSS文件进行缓存，以加快后续页面的加载。
带有补水功能的服务器端渲染（SSRH）
想象一下与上面描述的场景相同，但这次我们需要在客户端有一个功能齐全的React应用程序。
我们将在服务器上进行第一次渲染，并将HTML内容与JavaScript文件一起发回。React将对服务器渲染的标记进行补水，从这一点上看，该应用程序将表现得像一个CSR应用程序。
React提供了 内置的方法来执行这些动作。
第一个请求由服务器处理，随后的渲染则由客户端处理。因此，这样的应用被称为通用React应用（在服务器和客户端渲染）。处理路由的代码可以在客户端和服务器上分割（或重复）。
代码分割也有点棘手，因为ReactDOMServer 不支持React.lazy，所以你可能不得不使用类似 Loadable Components的东西。
还应该注意的是，ReactDOMServer 只执行浅层渲染。换句话说，虽然你的组件的渲染方法会被调用，但像componentDidMount 这样的生命周期方法不会被调用。所以你需要重构你的代码，用另一种方法向你的组件提供数据。
这就是NextJS等框架出现的地方。它们掩盖了SSRH中与路由和代码分割相关的复杂性，并提供了更顺畅的开发者体验。
当涉及到页面性能时，这种方法产生的结果好坏参半，我们将在下文中注意到。
对静态内容进行预渲染（PRS）
如果我们能在用户请求之前渲染一个网页，会怎么样？这可以在构建时进行，也可以在数据变化时动态进行。
然后我们可以在CDN上缓存生成的HTML内容，并在用户请求时更快地提供。
这被称为在我们渲染内容之前的预渲染，即用户请求之前。这种方法可用于博客和电子商务应用，因为其内容通常不依赖于用户提供的数据。
预渲染与补水（PRG）
我们可能希望我们预渲染的HTML在客户端渲染时是一个全功能的React应用。
在第一个请求被送达后，该应用将表现得像一个标准的React应用。这种模式在路由和代码拆分功能方面与上文所述的SSRH类似。
性能矩阵
你一直在等待的时刻终于到来了。是时候进行对决了。让我们来看看这些渲染路径中的每一个是如何影响网络性能指标的，并确定赢家。
在这个矩阵中，我们根据每个渲染路径在性能指标方面的表现，给它打分。
分数范围从1到5：
- 1 = 不满意
- 2 = 差
- 3 = 中等
- 4 = 良好
- 5 = 优秀
关键的经验之谈
对静态内容进行预渲染（PRS）会带来最高性能的网站，而带有水化功能的服务器端渲染（SSRH）或客户端渲染（CSR）可能会导致结果不尽人意。
也有可能对网站的不同部分采用多种方法。例如，这些性能指标可能对面向公众的网页至关重要，这样它们可以更有效地被索引，而一旦用户登录并看到私人账户数据，它们可能就不那么重要了。
每条渲染路径都代表了你想在哪里以及如何处理数据的权衡。重要的是，工程团队能够清楚地看到并讨论这些权衡，并选择一个能使用户的幸福感最大化的架构。
进一步阅读和考虑的问题
虽然我试图涵盖目前流行的技术，但这并不是一个详尽的分析。我强烈推荐你阅读 这篇文章，在这篇文章中，来自Google的开发人员讨论了其他高级技术，如流式服务器渲染、三态渲染和动态渲染（向爬虫和用户提供不同的响应）。
在建设内容繁杂的网站时，你需要考虑的其他一些因素包括：作者需要一个好的 内容管理系统（CMS），以及能够轻松生成/修改社交媒体预览并针对不同的屏幕尺寸 优化图像。
了解基础知识
React对SEO有好处吗？
React是一个为构建交互式和模块化UI而开发的JavaScript框架。SEO不是React的设计目标，但用React构建的内容网站可以被优化以获得更好的索引和排名。
为什么我应该关心SEO优化我的React应用？
不是所有的React应用程序都需要进行SEO优化。如果你在React上建立一个内容丰富的网站--例如，房地产列表网站、电子商务网站或博客--你将通过优化你的网站来获得更好的排名。
单页应用程序（SPA）和网站之间的区别是什么？
单页应用程序提供一个应用程序外壳（空HTML），然后由JavaScript填充或 "渲染"。所有后续的导航只获取相关的视图和数据，而应用程序的外壳保持不变。一个传统的网站提供有意义的HTML内容，然后由JavaScript进行交互。所有后续的导航都会加载一个全新的页面。
服务器端渲染是否比客户端渲染更好？
这取决于。例如，对于面向客户的电子商务页面，服务器端渲染产品页面可能会带来更好的排名和转换率，尽管面向卖方的产品上传页面可能不需要SSR。大多数大型网站会从混合方法中受益。
