什么是客户端渲染和服务器端渲染？

如今，许多网站都是用 JavaScript 构建的。虽然 JavaScript 在客观上没有任何问题，但我们实现它的方式会对我们的用户体验和我们在搜索结果中的排名产生相当大的影响。开发人员不得不考虑他们的 JavaScript 如何影响 SEO，而 SEO 和其他数字营销人员现在必须更多地了解他们的内容和网站体验所依赖的技术。如果您在任何一条船上，那么您来对地方了。继续阅读以了解客户端渲染和服务器端渲染之间的区别，或跳转到特定部分。

什么是客户端渲染？

客户端呈现意味着网站的 JavaScript 在您的浏览器中呈现，而不是在网站的服务器上。根据 Google 的 Martin Splitt 的说法，“如果您使用 JavaScript 框架，则默认为客户端渲染。这意味着您先发送基本的 HTML，然后再发送一段 JavaScript，然后 JavaScript 会在浏览器中获取和组合内容。”

将客户端渲染想象成从宜家订购家具。宜家不会把已经组装好的家具送到你家。相反，他们会在到达您家后将您必须组装的零件发送给您。

客户端渲染有什么好处？

因为呈现内容的所有负担都在客户端（即试图查看您的页面的人或机器人），客户端呈现是网站所有者更便宜的选择，因为它减少了他们自己的服务器上的负载。这也是 JavaScript 网站的默认状态，使网站所有者的客户端呈现比服务器端呈现更容易。

客户端渲染的风险是什么？

客户端渲染有两个主要缺点。一方面，客户端渲染会增加用户体验不佳的可能性。JavaScript 可以为页面增加几秒钟的加载时间，如果这种负担完全由客户端（网站访问者）承担，那么他们可能会感到沮丧并离开您的网站。

客户端渲染的第二大缺点是它对搜索引擎机器人的影响。例如，Googlebot 有一种称为第二波索引的东西。在这个过程中，他们首先对页面的 HTML 进行爬网和索引，然后在资源可用时返回呈现 JavaScript。这种两阶段的方法意味着有时，JavaScript 内容可能会被遗漏，并且不会包含在 Google 的索引中。

其他搜索引擎在渲染 JavaScript 方面比谷歌差。JavaScript 还可以在搜索引擎机器人抓取网站时减慢它们的速度，这在大型网站上可能会引入抓取预算问题。

什么是服务器端渲染？

服务器端渲染是指网站的 JavaScript 在网站的服务器上渲染。再次使用家具示例，这就像订购完全组装好的到达您家的家具。

服务器端渲染有什么好处？

因为 JavaScript 在网站的服务器上呈现，所以搜索引擎机器人和人类都能获得更快的页面体验。这不仅意味着更好的用户体验（这也是谷歌排名算法的一部分），而且还消除了与速度相关的抓取预算问题。

将完全呈现的页面发送到搜索引擎机器人也意味着您不会冒客户端呈现内容可能发生的“部分索引”的风险。当 Google 和其他搜索引擎机器人尝试访问您的页面时，他们无需等待渲染资源可用才能看到您的完整页面，而是从一开始就获得完全渲染的页面。

服务器端渲染有哪些风险？

服务器端渲染可能是昂贵且资源密集型的。它可能很昂贵，因为为机器人和人类网站访问者呈现内容的全部负担都在您的服务器上。实施它可能会占用大量资源，因为它不是 JavaScript 网站的默认设置，并且需要您的工程团队的工作才能执行。

服务器端渲染也往往不适用于第三方 JavaScript。因此，如果您使用 Bazaarvoice 之类的服务在您的网站上提取评论，它们将不会通过服务器端呈现来呈现。

哪个更适合 SEO、客户端或服务器端渲染？

在这两个选项之间，服务器端渲染比客户端渲染更适合 SEO。这是因为服务器端渲染可以加快页面加载时间，这不仅可以改善用户体验，还可以帮助您的网站在 Google 搜索结果中获得更好的排名。

服务器端渲染也更适合 SEO，因为它消除了从搜索引擎机器人渲染 JavaScript 的负担，解决了与速度相关的抓取预算问题和部分索引。但是，如果您负担不起实现服务器端渲染的费用怎么办？或者您没有执行它的技术资源？值得庆幸的是，还有第三种选择。

混合渲染选项：动态渲染

动态渲染是客户端和服务器端渲染的混合体。它是这样工作的。当搜索引擎机器人尝试访问页面时，网站会发送一个完全渲染的页面。但是当一个人试图访问一个页面时，他们的浏览器必须呈现该页面。

许多人喜欢这种Google 认可的渲染选项，因为它：

• 比服务器端渲染更便宜、更容易实现
• 解决与速度相关的抓取预算问题
• 解决部分索引问题
• 让人类访问者享受 JavaScript 提供的交互性

哪些类型的网站需要担心这个问题？

客户端渲染、服务器端渲染或动态渲染之间的争论只与使用 JavaScript 的网站相关。如果您的网站是纯 HTML，则人类用户或搜索引擎机器人不需要呈现任何内容。基于 React 和 Angular 等库构建的完整 JavaScript 网站在渲染之前可能完全空白，具体取决于它们的编码方式。

网站也可以是部分 JavaScript 和部分 HTML。例如，网站可能只依赖 JavaScript 来获取评论（例如 Bazaarvoice）或“相关产品”小部件。这意味着在渲染之前只有页面的一部分是可见的。

如果您的网站部分或完全依赖 JavaScript，特别是如果您的网站很大（即数千或数百万页）并且经常更改（例如新闻出版商或产品周转率高的电子商务网站），那么您肯定会想要仔细考虑您的渲染选项。

如何审核我的 JavaScript 网站是否存在 SEO 问题？

在选择解决方案之前，最好先诊断一下您的 JavaScript 网站上存在哪些 SEO 问题（如果有的话）。

有几种方法可以做到这一点：

• 使用“禁用 JavaScript”扩展— 您可以使用各种浏览器扩展来关闭您正在查看的网页上的 JavaScript。这是查看页面上 JavaScript 元素位置的简单方法。如果关闭 JavaScript 后内容或链接消失，则可能是 JavaScript SEO 问题。
• 对加载了 JS 的内容进行 Google 搜索— 一旦您确定了加载了 JavaScript 的内容，请尝试复制其中的一些文本并将其粘贴到 Google 搜索中。如果您的网站没有返回任何结果，则您可能遇到了 JavaScript SEO 问题。
• Google Search Console 的 URL 检查工具- 通过此工具运行一个页面，然后单击“查看抓取的页面”以查看 Google 呈现的内容。如果缺少某些页面内容，则可能是 JavaScript SEO 问题。您可以使用 Google 的Rich Results Test或Mobile-Friendly Test做同样的事情。
• 将仅 HTML 的爬网与启用 JS 的爬网进行比较——如果您有一个支持 JavaScript 的爬虫，如SiteCrawler，您可以在不启用 JavaScript 的情况下爬取您的网站，然后在启用 JavaScript 的情况下再次爬取。虽然其他工具允许您一次测试一个页面，但这是获得整个站点中 JavaScript 问题的高级视图的好方法。