为什么动态渲染不是长期解决方案
已发表: 2022-08-29万一你错过了，谷歌最近指出：
- 动态呈现是一种变通方法，而不是 JavaScript 问题的长期解决方案，并且
- Google 建议改用服务器端渲染、静态渲染或水合。
尽管谷歌官方文档阐明了我们现在应该如何对待动态渲染，但困扰许多人的问题仍然存在：为什么我们应该将动态渲染视为临时解决方案？
如果这个问题触发你像我一样寻找答案，让我们深入挖掘！
为什么此更新很重要？
要了解为什么我们认为此更新至关重要，让我们回顾一下 Google 之前如何处理（动态）渲染。
动态渲染故事时间线
这一切都始于 2009 年，当时谷歌意识到谷歌知道的所有网站中有近 70% 已经使用了 JavaScript。 但问题是，当时他们根本无法渲染 JavaScript。
为了确保对 JavaScript 进行抓取和索引，Google 建议在向用户提供基于 JavaScript 的全功能网站时，向机器人提供网站的静态 HTML 版本。 这是今天动态渲染的开始，作为一种解决方法，以应对 Google 无法处理客户端渲染网站的情况。
2014 年，Google 正式承认他们开始渲染基于 JavaScript 的网站，到 2015 年更新他们普遍能够渲染 JavaScript 。 然而，许多网站仍在努力正确呈现和索引其 JavaScript 内容。
这就是为什么 Onely 的首席执行官 Bartosz Goralewicz 开始研究该主题并尝试找出Google 是否可以正确抓取和索引 JavaScript 框架的原因。
而在谷歌方面，2018 年出现了更精确的动态渲染信息。在谷歌 I/O 大会上，谷歌人承认他们使用了两波索引。 它概述了，一般来说，只要 Google 没有资源来处理该内容，基于 JavaScript 的网站的呈现就会被推迟。 此外，在会议结束后不久，Google 发布了其官方文档（现已更新），建议使用动态渲染让您的 JavaScipt 内容更快地被索引。
然后，在 2019 年，Bartosz Goralewicz在 SMX WEST 的演讲中详细阐述了动态渲染。 他的目的是解释为什么这个解决方案不是解决所有渲染问题的灵丹妙药。
尽管我们 Onely 已经知道动态渲染并不是最好的解决方案，但 Google 仍然推荐它作为爬虫处理 JavaScript 的一种解决方法，以便网站管理员继续使用它。 但不幸的是，他们往往没有意识到托管是多么昂贵。
什么是动态渲染？
动态呈现（也称为预呈现）包括为用户提供功能齐全的 JavaScript 版本的网站，以及为爬虫提供静态 HTML 版本以呈现您的 JavaScript 内容。 它通过检测和区分不同的用户代理并向用户和机器人提供合适的网站版本来工作。
但是，这并不一定意味着必须为用户提供完全客户端呈现的内容； 他们只是没有提供与机器人相同的静态文件。 一般来说，整个 JavaScript 体验是为用户提供的，而 HTML 文件是为机器人提供的。
Google 通过指定以下内容来补充该定义：
我们称其为动态是因为您的站点会动态检测请求是否存在搜索引擎爬虫，例如 Googlebot，然后才将服务器端呈现的内容直接发送到客户端。 您也可以在此处包含其他无法处理渲染的 Web 服务。 例如，可能是社交媒体服务、聊天服务，以及任何试图从您的页面中提取结构化信息的东西。 对于所有其他请求者，因此您的普通用户，您将提供您的普通混合或客户端渲染代码。资料来源：约翰·穆勒
由于爬虫处理渲染阶段的成本通常很高，因此动态渲染为 Googlebot 提供了一个易于理解、轻量级的静态 HTML 版本，可以让您的内容更快地为可能的索引做好准备。
这就是为什么谷歌建议动态渲染主要是对网站的权衡：
- 经常更改他们的内容，例如新闻发布网站——他们需要尽快索引他们的新内容，这样他们就不能推迟 JavaScript 渲染的执行，
- 使用爬虫不支持的现代JavaScript 功能，以及
- 依靠通过社交媒体或聊天应用程序分享他们的内容。
动态渲染与其他流行的 JavaScript 服务方式有何不同？
渲染是索引管道的关键步骤 - 您的网站如何渲染会影响搜索引擎如何查看您的内容。 为了满足机器人和用户的需求，您需要了解两种不同的方法：服务器端渲染和客户端渲染。
理解它们至关重要，因为这些概念还会以您可能选择的不同 JavaScript 服务方式重复出现，例如动态呈现。
客户端渲染
客户端渲染基于使用 JavaScript 在浏览器中直接处理内容。 首先，浏览器和爬虫获取初始 HTML（通常表示内容很少或没有内容的空白页面）。 然后，从服务器异步下载并运行 JavaScript，向用户显示您的动态内容。
但是，采用这种方法，您的内容可能无法被 Google 呈现，因为由于资源有限，它可能难以独立处理基于 JavaScript 的网站版本。 请记住，客户端渲染本身不是问题，Google 可以处理它，但除非优化得很好，否则 Google 抓取、渲染和索引的成本非常高。
服务器端渲染
通过服务器端呈现，机器人和用户会在请求时立即收到您的网站的 HTML 版本，该版本在服务器上完全呈现。 在服务器上处理呈现 HTML 的事实使浏览器的整个过程更快，搜索引擎通常更容易获取内容。
此外，虽然服务器端渲染是推荐的解决方案，但 Google 强调选择它不会影响您的排名——它与动态渲染的区别仅在于设置和维护方面：
以一种或另一种方式实施它并没有 SEO 排名奖金——它们只是使内容可索引的不同方式（客户端渲染也是如此）。 从我的 POV 来看，动态渲染和服务器端渲染之间的区别更多地在于实际的基础设施设置和维护（它也会影响速度，具体取决于您的设置方式）。资料来源：约翰·穆勒
动态渲染是如何工作的？
动态渲染可以使用外部渲染器来促进将初始 HTML 和 JavaScript 更改为爬虫可以处理的静态 HTML。
Google 建议使用以下动态渲染器：
- Prerender.io （第三方软件），
- Puppeteer （开源软件），或
- Rendertron （开源软件）。
配置任何推荐的解决方案后，请记住：
- 选择您希望为网站的静态 HTML 版本提供服务的用户代理，例如“googlebot”或“twitterbot”。
- 设置缓存以使您的网站能够尽快提供服务并避免超时。
- 确保您网站的预呈现版本服务于面向设备的版本。 换句话说，移动搜索引擎爬虫应该在其他爬虫（桌面爬虫）时看到您网站的移动版本。
- 确保您的服务器可以将静态 HTML 提供给选定的用户代理。
关于实现动态渲染，Google 提供了关于实现和验证动态渲染配置的官方文档。
为什么以及如何开始解决动态渲染问题？
在完全呈现之前，Google 无法完全索引基于 JavaScript 的网站。 因此，如果动态呈现失败，您的内容将不会包含在 SERP 中。
仅以美国流行的电子商务网站为例： 80% 使用 JavaScript 生成主要内容和类似产品的链接。 它对这些领域关键部分的可索引性构成了严重威胁。 现在，想想这如何转化为他们的收入下降。
这就是为什么实现动态渲染的关键步骤是导航和验证潜在问题。
使用移动友好测试
该工具允许您确保您的网站的移动友好性，并查看被测试网站的渲染源代码，以及 Googlebot 如何在移动设备上渲染您的页面的屏幕截图。
您可能会发现源代码中缺少某些部分内容——这表明 Googlebot 无法呈现这些资源，这可能是动态呈现实施不当的结果。
在该工具中，您可以深入了解详细信息部分以了解何时以及由哪个爬虫爬取了页面，甚至可以检查 HTTP 响应。 如果您正在检查您的域，移动设备友好测试可以将您转移到 Google Search Console 中的进一步分析中。
如果您碰巧在使用移动设备友好测试时发现任何问题，请阅读我们博客上的文章，了解如何针对移动设备优化您的网站。
使用谷歌搜索控制台
您需要检查以确保正确实施动态呈现的报告之一是索引覆盖率（页面索引）报告。 它可以帮助您解决索引问题，并告知您哪些页面未编入索引以及原因。
可能提示您网站呈现问题的状态示例是无内容状态的已编入索引的页面 ‒ Googlebot 无法查看内容，因为它无法呈现该页面。
Google Search Console 中的另一个有用功能是URL 检查工具。 与移动友好测试类似，URL 检查工具允许您检查测试页面的状态并查看其呈现的版本。
使用ZipTie.dev
由于索引问题可能源于渲染问题，因此有必要分析您的网站是如何被索引的。 您应该查看索引页面的数量以及这些页面的特定部分是否被索引。
要检查页面的特定片段是否被索引，您可以使用 site: 命令和引号中的文本片段。 但是，当您有一个大型网站需要分析数百万个 URL 时，您将无法手动检查它们。
ZipTie.dev 将索引与字数、标题、标题、元描述等其他数据点一起分析。 这将帮助您确定索引（以及渲染）问题的潜在原因。
使用富结果测试
如果您在网站上使用结构化数据并关心您的富媒体搜索结果，请使用富媒体搜索结果测试来检查标记是否正确实施。
该测试还向您展示了您网站的渲染版本，并概述了 Googlebot 如何理解您的标记，指定任何错误、错误类型以及它们在代码中的出现位置。
但是，仅选中“如何解决动态渲染问题”列表中的复选框通常可能还不够。 网站越大越复杂，乍一看可能越难确定到底出了什么问题。
例如，Mobile-Friendly Test 的错误结果可能表明您有一些渲染问题。 但是，与此同时，服务器可能刚刚经历了一个临时故障，并且没有有效地响应其他资源，例如 CSS 文件。 因此，它会影响网站的显示方式，但可能只是一次性的情况。
故障排除（动态）渲染总是需要一般的技术 SEO 知识和全面的分析。
为什么动态渲染不是长久之计？
动态渲染使用大量服务器资源
动态渲染可能会显着降低您的服务器速度。 大量的预渲染请求会导致渲染器失败，因此，Googlebot 会：
- 收到一个空白页面‒ Googlebot 只能看到初始 HTML，但由于代码中没有 JavaScript 引用，因此它看不到网站的其余部分。 该网站无法编入索引，因为 Googlebot 看不到内容。
- 接收客户端呈现的网站版本——Google 在许多情况下可以在技术上处理 JavaScript，但实现动态呈现的全部目的是为其提供静态内容。 在某些情况下，下载 JavaScript 内容和使用它更新网站的初始 HTML 版本的成本对于 Googlebot 来说可能太高了。
因此，在您决定动态渲染之前，如果您的网站需要，必须做出慎重的决定。
动态渲染的实现和维护会使用大量的服务器资源。 如果您发现 Googlebot 能够正确地为您的网页编制索引，那么如果您没有对您的网站进行重要的、高频的更改，那么您可能不需要实际实施任何特殊的操作。 […]资料来源：约翰·穆勒
动态渲染创建两个独立的站点结构，而不是一个
使用动态呈现，您可以维护网站的两个版本。 这意味着您需要单独验证您的网站是否针对用户和机器人进行了优化。
动态呈现的网站需要优秀的 SEO 和开发团队。 即使您作为网站所有者拥有这样的团队，也要考虑在不专注于动态渲染验证的情况下，他们可以如何更好地利用时间。
动态渲染恶化用户体验
动态呈现意味着为您的用户提供客户端呈现的版本，这会对用户的页面性能产生不良影响，因为它需要他们的浏览器在他们这边处理呈现过程。 这可能是一场真正的斗争，尤其是对于使用旧手机的用户来说，这些用户将难以处理大量的 JavaScript。 虽然客户端渲染并不全是坏事，但我们建议尽可能走服务器端路线。
优化网站时，动态渲染增加了一层额外的复杂性
使用动态渲染，发现和识别由此产生的问题更具挑战性。
由于服务器上的问题或缺少组件，动态渲染经常失败。 结果，Googlebot 收到一个空白页。 不幸的是，当您以用户（使用功能齐全的 JavaScript）而不是机器人的身份查看网站时，您对此一无所知。 要解决此问题，请在浏览器中将用户代理切换到 Googlebot 。
诊断此类问题并发现产生特定问题的用户代理需要大量的 SEO 专业知识。 而且您需要注意，对您的渲染问题的任何响应都不会反映在您网站的索引上。
动态渲染的更好替代方案是什么？
如果实施得当，从 SEO 的角度来看，下面提到的所有解决方案都可能对您的网站同样有益。
但是，实施的效果主要取决于您使用的技术和您的开发团队。 关于开发资源，每个解决方案的实施成本可能不同，但应根据情况单独评估。
服务器端渲染
它是您可以使用的最流行的解决方案之一，而不是动态渲染。
从 SEO 的角度来看，使用服务器端渲染的最大优势在于只维护您网站的一个版本。 与动态呈现相比，您不必验证用户和 Googlebot 的版本是否相同——所有用户代理都接收相同的内容。
此外，与动态渲染不同，服务器端渲染不会让用户自己处理 JavaScript 文件以生成关键页面元素。 它使页面加载更快； 一些网络性能指标会影响您的排名和用户体验。
但请注意：使用服务器端渲染，如果服务器需要生成静态 HTML ad hoc，或者服务器缓存响应效率不够高，用户可能会体验到稍差的 Time to First Byte 指标。
并且澄清一下：即使服务器端渲染已正确实现，SEO 仍需要验证所有网站元素。 但总而言之，只使用一个版本的网站更容易维护。
静态渲染
静态渲染（也称为静态生成）依赖于为机器人和用户提供构建时生成的静态 HTML 版本。 这意味着您的网站代码已准备好由爬虫处理，而用户只是在服务器上等待下载。
与服务器端渲染类似，在使用此解决方案时，您必须为所有用户代理仅验证您网站的一个版本。
此外，与动态渲染相比，静态渲染提高了页面性能，因为它可以更快地为您的网站的预渲染版本提供服务——静态文件可以缓存在用户的设备上并再次使用。
补液
Rehydration 也只为机器人和用户提供网站的一个版本，就像之前的两个解决方案一样。 但是，它分两个阶段工作。
在第一阶段，爬虫和用户会收到一个包含关键元素的服务器端渲染页面。 例如，对于电子商务网站，这些可能是产品名称、描述或产品评级。 在第二阶段，JavaScript 会下载所有对 SEO 至关重要的非关键资源，但用户可能会延迟接收它们。 例如，这些是聊天小部件或评论部分。
在使用 rehydration 审核网站时，您需要检查 JavaScript 添加的所有元素是否都是非关键元素。
动态渲染可以长期工作吗？
它可能但很少这样做。 特别是如果您有一个大型网站并且不精通技术 SEO，请不要单独采用这种方法。
请记住，即使您不担心技术 SEO，动态渲染的维护成本仍然很高。
以下是我们的客户使用动态渲染的两个示例：
在页脚中为用户提供客户端呈现的链接
在这种情况下，由于动态渲染，Googlebot 可以在源代码中找到链接，但同时为用户生成页脚链接并添加到 DOM 中（表示渲染后页面的状态）。开始滚动页面。 客户端决定实施动态渲染以优化其性能——如果用户不滚动到页面末尾，并非所有元素都需要立即存储在 DOM 中。
向用户提供客户端呈现的内部搜索结果列表
客户端决定将服务器端呈现的版本提供给机器人（列表的较轻版本）和客户端呈现的版本提供给用户（当产品列表是临时生成的并且可以个性化时）。
包起来
尽管动态渲染只应被视为一种临时解决方案，但在某些情况下，您会将其视为您网站的救生圈。
如果您需要实现动态渲染，请记住遵循以下四个步骤：
- 规划您的更新和部署。 确保您的开发和 SEO 团队有足够的资源来处理预呈现网站的实施和维护。
- 确保设置高效且没有错误。 开发一种方法来验证设置是否正常工作，并且提供给机器人的版本中没有缺少关键页面元素。
- 请记住，您需要能够比较您网站的 HTML 和 JavaScript 版本并检测差异。
- 请记住，在大多数情况下，动态渲染应该只是一种解决方法。 考虑到您的开发资源和技术能力，寻找机会切换到其他推荐的解决方案。