服务器端渲染是什么？服务器端渲染解释！

介绍

Web 开发的世界发生了迅速的变化。在过去的 15 年中，网页已经从简单的 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 页面无法正确抓取和编入索引，Google 会将它们作为空白屏幕读取并相应地对其进行排名，这可能对您网站的 SEO 健康造成灾难性的影响。

Google 声称 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 优势。

谷歌对页面加载速度最快的网站给予优先搜索排名。更快的加载时间可以改善用户指标，例如会话持续时间和跳出率；Google 算法会查看这些指标，并为您提供额外的 SEO 提升。

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

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

事实证明，为您的网站使用 SSR 确实有一些明显的缺点。它昂贵，难以实施，并且需要大量人力来设置。它还增加了在您自己的服务器上呈现 JavaScript 内容的负担，这将增加您的服务器维护成本。

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

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

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