服务器端渲染 – SEO和预算的利弊

Web 开发的世界瞬息万变。

在过去的十五年里，网页已经从简单的HTML文本发展到多媒体互动体验，将Web开发提升为一门艺术。这就像一个文明在一个世纪内从石屋到太空探索。

在此期间，Web 开发中最重要的两个进步是采用 JavaScript 框架来构建网页，以及搜索引擎优化领域。

具有讽刺意味的是，JavaScript 开发和 SEO 经常相互矛盾。JavaScript 使网站使用起来有趣且有趣，而 SEO 使人们首先可以找到它们。

服务器端渲染 （SSR） 的创建是为了使它们成为可能。

请继续阅读，了解 SSR 是什么、为什么要关心以及如何为自己使用它。

什么是服务器端渲染？

服务器端渲染 （SSR） 是将网站的 JavaScript 加载到您自己的服务器上的常用方法。当人类用户或搜索引擎网络抓取工具（如 Googlebot）从服务器请求网页时，该内容会传递到浏览器，并作为完全呈现的静态 HTML 网页读取。

从历史上看，搜索引擎很难抓取和索引使用 JavaScript 而不是 HTML 制作的网站。

Google 使用两波索引系统将基于 JavaScript 的网页编入索引。当 Googlebot 首次遇到您的网站时，它会抓取您的网页并提取其所有 HTML、CSS 和链接，通常在几个小时内完成。

然后，Google 将 JavaScript 内容放入队列中，并在拥有资源时呈现它。有时这需要几天或几周的时间。在此期间，您的网页不会被编入索引，因此无法在 Google 上找到。这是你错过的大量流量。

更糟糕的是，如果你的JavaScript页面无法被正确抓取和索引，谷歌会将它们读取为空白屏幕并相应地进行排名，这对你网站的SEO健康可能是灾难性的。

谷歌声称Googlebot能够很好地抓取和索引基于Javascript的网页，但这尚未得到证实。其他搜索引擎，如 Bing、Yandex 和 DuckDuckGo 根本无法抓取 JavaScript。

无论使用哪种搜索引擎，JavaScript 都会带来问题，因为它需要额外的处理能力来抓取和索引，从而占用您网站分配的更多抓取量。

SSR 就是为这个问题而设计的。它在您自己的服务器上呈现 JavaScript，而不是给用户代理带来负担，从而在请求时快速且易于访问内容。

什么是客户端渲染，它与服务器端渲染有何不同？

客户端渲染 （CSR） 是 SSR 的越来越流行的替代方案。

两者之间的区别类似于从 Blue Apron 或 Green Chef 等服务订购准备好的餐包，或者购买所有食材并自己做饭。

客户端渲染在用户的浏览器中加载网站的 JavaScript，而不是在网站的服务器中加载。它正在订购准备好的餐包。

使用 Angular、React 或 Vue 等前端 JavaScript 框架构建的网站都默认使用 CSR。从 SEO 的角度来看，这是有问题的，因为当网络爬虫在您网站上遇到一个页面时，他们看到的只是一个空白屏幕。

同时，服务器端渲染是更传统的选择;这是自己买杂货和做饭。它会将您的 JavaScript 内容加载到您网站的服务器上。

SSR 可以追溯到 JavaScript 和 PHP 主要是后端技术的时代，而 Java 只是用来使基于 HTML 的网站更具交互性，而不是从头开始构建它们。

SSR 将 HTML 文件转换为用户端浏览器可读的信息。Googlebot 可以在没有 JavaScript 的情况下查看网页上的基本 HTML 内容，而用户则可以看到完全呈现的网页。您的网站在 Google 上排名正确，您的用户将获得一场视觉和听觉盛宴的网络体验。

服务器端渲染的优点

我们已经讨论了服务器端渲染的一些 SEO 好处：完美抓取和索引 JavaScript 页面，不再浪费抓取预算或搜索排名直线下降，没有缓慢的两波索引过程;只是流畅、无缝的索引和随之而来的源源不断的 Google 流量。

SSR 比上述优势更多。

它优化了社交平台的网页，而不仅仅是搜索引擎。当有人在 Facebook 或 Twitter 上分享您的页面时，帖子会包含页面预览。

它具有许多性能优势，可以改善您网站的用户体验。 SSR 页面具有更快的加载时间和更快的首次内容绘制，因为内容可以更快地在浏览器中使用。这意味着用户查看加载屏幕的时间更少。

JavaScript 是资源密集型和代码密集型的。使用CSR将其下载到浏览器上会大大增加页面重量。单个 JavaScript 文件的平均大小约为 1MB，而 Web 开发最佳实践建议将整个页面保持在最大 5MB 以下。

SSR 带来的性能增强也有其自身的 SEO 优势。谷歌对页面加载速度最快的网站给予优先搜索排名。更快的加载时间改善了会话持续时间和跳出率等用户指标;谷歌算法会查看这些指标，并为您提供额外的SEO优势。

更快的网页。快乐的搜索引擎。快乐的用户。

服务器端渲染的缺点

如果 SSR 在技术上更加优化且对 SEO 友好，为什么不是所有网站都使用它？

事实证明，在您的网站上使用 SSR 确实有一些明显的缺点。它成本高昂，难以实施，并且需要大量人力来设置。

它还增加了在您自己的服务器上呈现 JavaScript 内容的负担，这将增加您的服务器维护成本。

使用 JavaScript 框架的网站需要通用库来启用 SSR;Angular需要Angular Universal，React和Vue需要Next.JS。所有这些都需要您的工程团队进行额外的工作，这会花费您的钱。

SSR 页面将具有更高的 TTFB 延迟和较慢的交互时间。您的用户将更快地看到内容，但如果他们单击某些内容，则不会发生任何事情。他们会感到沮丧并离开。

SSR 不是万能的解决方案。在将其落实到位之前，您需要评估网站的技术需求和挑战。

还有一个更好的解决方案：预渲染

SSR 有很多好处，可以弥补 CSR 的技术缺陷和恶化的用户体验。但是，它有其自身的局限性，可能不是您网站的最佳解决方案。

预渲染是一个很好的选择，它将改进的性能和索引与易于设置和实现相结合。它具有成本效益、可扩展性，甚至被 Google 自己的文档推荐。