编者注:本文由我们的编辑团队于10/25/22更新. 它已被修改，以包括最近的来源，并与我们目前的编辑标准保持一致.

反应是为了创建交互式ui而开发的 声明, 模块化, 跨平台的. 今天, 它是编写高性能前端应用程序的最流行(如果不是最流行的话)javascript框架之一. 最初开发的目的是编写单页应用程序(spa), 反应现在被用来创建成熟的网站和移动应用程序. 然而, 导致其流行的相同因素和特性也给反应 搜索引擎优化带来了许多挑战.

如果你有丰富的传统web开发经验，并转向反应, 您将注意到越来越多的HTML和CSS代码转换为JavaScript. 这是因为反应不建议直接创建或更新UI元素, 而是建议描述UI的“状态”. 然后反应将更新DOM以最有效的方式匹配状态.

因此，对UI或DOM的所有更改都必须通过 反应的引擎. 虽然对开发人员来说很方便, 这可能意味着用户需要更长的加载时间，搜索引擎需要更多的工作来查找和索引内容, 对反应网页的搜索引擎优化造成潜在的问题.

在本文中, 我们将解决在构建具有seo性能的反应应用程序和网站时所面临的挑战, 我们将概述几种用于克服它们的策略.

谷歌如何抓取和索引网页

由于谷歌接收了超过90%的在线搜索，因此有必要仔细研究一下它的抓取和索引过程.

这张快照是从 谷歌的文档 能帮助我们吗?. (注:这是一个简化的框图. 实际的Googlebot要复杂得多.)

谷歌索引步骤:

1. Googlebot维护一个抓取队列，其中包含将来需要抓取和索引的所有url.
2. 当履带空闲时, 它获取队列中的下一个URL, 提出请求, 并获取HTML.
3. 在解析HTML之后, Googlebot决定是否需要获取并执行JavaScript来呈现内容. 如果是，URL将被添加到渲染队列中.
4. 晚些时候, 呈现器获取并执行JavaScript来呈现页面，并将呈现的HTML发送回处理单元.
5. 处理单元提取所有的url。 tags 在网页上提到并将其添加回抓取队列.
6. 内容被添加到谷歌的索引中.

注意，两者之间有明显的区别 处理 阶段，解析HTML和 渲染器 执行JavaScript的阶段. 这种区别的存在是因为执行JavaScript是 昂贵的鉴于谷歌机器人需要考虑的不仅仅是 130万亿个网页. 所以当Googlebot抓取网页时，它会立即解析HTML，然后 队列 稍后运行的JavaScript. Google的文档提到页面在渲染队列中停留几秒钟, 虽然时间可能更长.

它的概念也值得一提 爬的预算. Google的爬行受限于带宽、时间和Googlebot实例的可用性. 它分配了特定的预算或资源来索引每个网站. 如果你正在构建一个包含数千页内容的大型网站.g., 电子商务网站), 这些页面使用大量JavaScript来呈现内容, 谷歌可能无法从您的网站读取尽可能多的内容.

注意: 你可以阅读谷歌关于管理抓取预算的指导方针 在这里.

为什么反应 搜索引擎优化仍然具有挑战性

这篇关于Googlebot抓取和索引的简要概述只触及表面. 软件工程师应该识别搜索引擎在抓取和索引反应页面时所面临的潜在问题.

下面是反应 搜索引擎优化挑战的原因，以及开发者可以做些什么来解决和克服这些挑战.

空的首关内容

我们知道反应应用程序严重依赖JavaScript，并且经常在搜索引擎上遇到问题. 这是因为反应使用了 应用程序外壳模型 默认情况下. 初始HTML不包含任何有意义的内容, 用户或机器人必须执行JavaScript才能看到页面的实际内容.

这种方法意味着Googlebot在第一次通过时检测到一个空页面. 只有当页面呈现时，Google才会看到内容. 当处理数千页时，这将延迟内容的索引.

加载时间和用户体验

获取、解析和执行JavaScript需要时间. JavaScript可能还需要进行网络调用来获取内容, 用户可能需要等待一段时间才能查看所请求的信息.

谷歌已经制定了一套 核心网络生命体征 与用户体验相关，用于其排名标准. 较长的加载时间可能会影响用户体验得分，促使谷歌降低网站的排名.

页面元数据

Meta 标签很有用，因为它们允许谷歌和社交媒体网站显示适当的标题, 缩略图, 还有几页的描述. 但是这些网站依赖于 tag of the fetched webpage to get this information; they do not execute JavaScript for the target page.

反应在客户端上呈现所有内容，包括元标记. 因为应用程序外壳对于整个网站/应用程序是相同的, 可能很难为单个页面和应用程序调整元数据.

网站地图

A 网站地图 是提供有关页面信息的文件吗, 视频, 你网站上的其他文件以及它们之间的关系. 像Google这样的搜索引擎会读取这个文件来更智能地抓取你的网站.

反应没有内置的方式来生成站点地图. 如果你用的是 反应的路由器 要处理路由，您可以找到可以生成站点地图的工具，尽管这可能需要一些努力.

非react 搜索引擎优化注意事项

这些注意事项通常与建立良好的搜索引擎优化实践有关.

1. 有一个最佳选择 URL结构 让人们和搜索引擎知道在页面上可以看到什么.
2. 优化机器人.文本文件。 文件 帮助搜索机器人了解如何抓取您网站上的页面.
3. 使用CDN服务所有的静态资产，如CSS, JS，字体等.，并使用 响应的图像 减少加载时间.

我们可以通过使用服务器端呈现(SSR)或预呈现来解决其中的许多问题. 我们将在下面回顾这些方法.

进入Isomorphic 反应

字典对同构的定义是“在形式上相对应或相似”.”

在反应术语中，这意味着 服务器也有类似的形式 致客户端. 换句话说，您可以在服务器和客户端上重用相同的反应组件.

这种同构方法使服务器能够渲染反应应用程序，并将渲染后的版本发送给我们的用户和搜索引擎，这样他们就可以在JavaScript在后台加载和执行时立即查看内容.

这样的框架 下一个.js or 盖茨比 推广了这种方法. 我们应该注意到，同构组件看起来与传统的反应组件有很大的不同. 例如，它们可以包含在服务器而不是客户端上运行的代码. 它们甚至可以包含API秘密(尽管服务器代码在发送到客户端之前被剥离)。.

请注意，这些框架抽象了许多复杂性，但也引入了一种固执己见的代码编写方式. 我们将在另一节中深入研究性能权衡.

我们也会做a 矩阵分析 了解渲染路径和网站性能之间的关系. 但首先，让我们回顾一下衡量网站性能的一些基础知识.

网站性能指标

让我们来看看搜索引擎用来给网站排名的一些因素.

除了快速准确地回答用户的查询，谷歌认为一个好的网站 应该有 以下属性:

• 用户应该能够访问内容，而不需要太多的等待时间.
• 它应该尽早与用户的行为互动.
• 它应该加载得很快.
• 它不应该获取不必要的数据或执行昂贵的代码，以防止耗尽用户的数据或电池.

这些特征大致对应以下指标:

• 到第一个字节的时间(TTFB):点击链接到第一个内容出现之间的时间.
• 最大含量涂料(连结控制协定):所请求的文章变为可见的时间. 谷歌建议将这个值保持在2以下.5秒.
• 互动时间(创科实业):页面具有交互性的时间(用户可以滚动、点击等).).
• 包大小:在页面完全可见和交互之前，下载的字节数和执行的代码总数.

我们将重新讨论这些指标，以更好地理解不同的呈现路径如何影响每个指标.

接下来，让我们了解可用的不同渲染路径 开发人员反应.

渲染路径

我们可以在浏览器或服务器上呈现反应应用程序，并产生不同的输出.

在客户端和服务器端渲染的应用程序之间，有两个功能发生了显著变化: 路由 和 代码分离. 下面我们来仔细看看.

客户端呈现(企业社会责任)

客户端呈现是 默认渲染路径 用于反应 SPA. 服务器将提供a shell应用程序 不包含任何内容. 一旦浏览器下载, 解析, 并执行包含的JavaScript源代码, HTML内容被填充或 呈现.

路由功能为 由客户端应用程序处理 通过管理浏览器历史记录. 这意味着无论请求哪条路由，都会提供相同的HTML文件, 客户端在呈现后更新其视图状态.

代码分割相对简单. 您可以使用动态导入或 反应.懒惰的. 拆分它，以便只根据路由或用户操作加载所需的依赖项.

如果页面需要从服务器获取数据以呈现内容，那么, 博客标题或产品描述—只有在安装和呈现相关组件时才能这样做.

当网站获取额外的数据时，用户很可能会看到一个“正在加载数据”的标志或指示.

带有引导数据的客户端渲染(企业社会责任B)

考虑与企业社会责任相同的场景，但不是在DOM呈现后获取数据, 假设服务器发送的相关数据是在HTML中引导的.

我们可以包含一个像这样的节点:

并在组件挂载时解析它:

var data = JSON.解析(文档.getElementById(“数据”).innerHTML);

我们只是省去了往返服务器的麻烦. 我们将看到一些权衡.

服务器端呈现到静态内容(SSRS)

想象一个需要动态生成HTML的场景.

如果我们正在构建一个在线计算器，用户发出这样的查询 /计算/ 34 + 15 (省略URL转义)我们需要处理查询, 评估结果, 并使用生成的HTML进行响应.

我们生成的HTML在结构上非常简单，一旦生成的HTML被提供，我们不需要反应来管理和操作DOM.

所以我们只是提供HTML和CSS内容. 你可以使用 renderToStaticMarkup 实现这一点的方法.

路由将完全由服务器处理，因为它需要为每个结果重新计算HTML, 尽管CDN缓存可以用来更快地提供响应. CSS文件也可以被浏览器缓存，以便更快地加载后续页面.

服务器端补水渲染(SSRH)

想象一下与上面描述的相同的场景, 但这一次我们需要一个功能齐全的客户端反应应用程序.

我们将表演 第一次呈现 然后将HTML内容和JavaScript文件一起发回服务器. 反应会 再水化 服务器呈现的标记和应用程序将从此时开始像企业社会责任应用程序一样运行.

反应提供了 内置的方法 要执行这些操作.

第一个请求由服务器处理，随后的呈现由客户端处理. 因此，这样的应用程序被称为 通用反应应用 (在服务器端和客户端同时呈现). 处理路由的代码可能在客户端和服务器上分开(或重复).

代码分割也有点棘手，因为 反应DOMServer 不支持反应.懒惰，所以你可能需要使用类似 可加载的组件.

还应当指出的是 反应DOMServer 只执行浅渲染. 换句话说, 尽管会调用组件的呈现方法, 生命周期方法就像 componentDidMount 没有被调用. 因此，您需要重构代码，以便使用另一种方法向组件提供数据.

这就是像下一个JS这样的框架出现的地方. 它们掩盖了与SSRH中路由和代码分割相关的复杂性，并提供了更流畅的开发人员体验. 但是，当涉及到页面性能时，这种方法产生了不同的结果.

预渲染为静态内容(PRS)

如果我们能在用户请求之前呈现网页会怎么样? 这可以在构建时完成，也可以在数据更改时动态完成.

然后，我们可以在CDN上缓存生成的HTML内容，并在用户请求时更快地提供它.

预呈现是在用户请求之前呈现内容. 这种方法可以用于博客和电子商务应用程序，因为它们的内容通常不依赖于用户提供的数据.

预渲染与补水(PRH)

我们可能希望预渲染的HTML在客户端渲染时是一个功能齐全的反应应用.

在第一个请求被服务后，应用程序将表现得像一个标准的反应应用程序. 该模式在路由和代码分割功能上与SSRH类似.

性能矩阵

你等待已久的时刻已经到来. 是决战的时候了. 让我们来看看这些渲染路径是如何影响web性能指标的，并决定哪个是赢家.

在这个矩阵中, 我们根据每个渲染路径在性能指标中的表现为其分配分数.

分1 ~ 5分:

1 =不满意 2 =差 3 =适中 4 =好 5 =优秀

关键的外卖

预渲染为静态内容 (PRS)导致 教学质量最好的 而服务器端水合渲染(SSRH)或客户端渲染(企业社会责任)可能会导致令人印象深刻的结果.

也可以收养 针对网站不同部分的多种方法. 例如, 这些性能指标对于面向公众的网页来说可能是至关重要的，这样它们就可以更有效地建立索引, 然而，一旦用户登录并看到私人帐户数据，它们可能就不那么重要了.

根据您想要处理数据的位置和方式，每个渲染路径都有权衡. 重要的是，工程团队能够清楚地看到并讨论这些权衡，并选择一种能够最大限度地提高用户满意度的架构.

其他资源和注意事项

虽然我试图涵盖当前流行的技术，但这并不是一个详尽的分析. 我强烈推荐大家阅读 这篇文章 谷歌的开发人员讨论了流媒体服务器渲染等其他高级技术, trisomorphic呈现, 以及动态呈现(为爬虫和用户提供不同的响应).

在构建内容丰富的网站时，需要考虑的其他因素包括 内容管理系统 (CMS)为您的作者，并能够轻松地生成/修改社交媒体预览和 优化图片 对于不同的屏幕尺寸.