提升 Web 性能和 SEO

如果您与 SEO 打交道多年,您可能已经遇到过服务器端渲染 (SSR) 作为概念之一。 为什么选择服务器端渲染 (SSR) 而不是客户端渲染?

在本指南中,我将介绍服务器端渲染 (SSR) 的概念、它在现代 Web 开发中的意义,并区分服务器端渲染和客户端渲染。 我们还将介绍支持服务器端渲染的框架和库以及它们是如何实现的。

什么是服务器端渲染(SSR)?

服务器端渲染 (SSR) 是一种 Web 开发技术,其中网页上的内容在服务器而不是客户端浏览器上呈现。

为此,服务器会生成一个完全呈现的 HTML 页面,并将其发送到客户端浏览器,这意味着服务器承担了繁重的工作。 浏览器收到一个准备显示的页面,这加快了初始加载时间。

服务器端渲染如何工作?

每当用户请求网页时,服务器都会将所需的所有 JavaScript、HTML 和 CSS 代码组合在一起,然后将完整的页面发送到用户的浏览器。

因此,浏览器不必像客户端渲染那样从头开始形成页面。 SSR 可以实现快速的初始加载页面,也有利于 SEO。

服务器端渲染在后台使用 Vue.js 和 Gatsby.js 等 Web 框架来动态生成功能齐全的 HTML 页面。

这些框架从 API 或数据库中提取数据,然后使用组件或模板来构建功能性 HTML 文档。 服务器完成页面创建后,会将其发送到客户端浏览器,而不进行任何进一步处理。


图片来源: 反应pwa

这是服务器端渲染的工作原理:

  • 客户端发送 HTTP 请求:用户在浏览器的地址栏中输入地址。 浏览器建立HTTP连接并向服务器发送请求。
  • 数据获取:服务器从API或数据库中获取数据。
  • 预渲染:服务器将所有必需的 JavaScript 组件编译为静态 HTML,并将此 HTML 发送到客户端浏览器。
  • 页面加载和呈现:客户端从服务器下载并显示 HTML。
  • Hydration:客户端最终下载所有 JavaScript 代码以向 HTML 页面添加交互性。

服务器端渲染与客户端渲染

客户端渲染与服务器端渲染相反。 基本上,浏览器生成一个 HTML 文档并显示给用户。 以下是这两种方法之间的差异:

功能服务器端渲染 (SSR) 客户端渲染 (CSR) 初始加载时间快速初始加载时间可能会很慢,因为它依赖于客户端加载用户体验增强和改进了首次访问的用户体验有时可能会导致速度变慢第一次交互中的用户体验,但后续访问会增加可访问性所有基本内容都通过服务器上呈现的初始 HTML 文档加载可访问性可能是一个问题,特别是在用户禁用 JavaScript 的情况下SEO 性能SSR 勾选了 SEO 的所有正确框一些搜索引擎可能会发现它很难在客户端索引一些动态生成的页面可扩展性很容易扩展采用服务器端渲染的高流量网站开发人员必须想出一种深思熟虑的方法来扩展采用客户端渲染的网站安全性很容易减少服务器- 在服务器上加载页面时存在的端漏洞。容易受到跨站点脚本 (XSS) 等攻击以及与客户端渲染相关的其他漏洞。

服务器端渲染对 SEO 的好处

  • 快速的初始加载时间:页面加载所需的时间是网站访问者考虑的因素之一。 SSR 允许网站用户几乎立即看到完全加载的 HTML 页面。 即时加载减少了用户在与网页交互之前等待的时间。
  • 慢速设备/网络上的快速性能:用户用来访问网页的网络可能很慢,或者他们使用的设备在不太快的操作系统上运行。 服务器端渲染意味着用户设备不必运行太多 JavaScript,从而提高了性能。 此类网络或设备不再需要大量带宽或处理能力来显示加载的 HTML 页面。
  • 一致的用户体验:SSR 允许您通过首次绘制时间 (TTFP) 创造良好的第一印象。 当 HTML 页面由于服务器端渲染而快速加载时,此类用户会首先感知到您的网站。
  • 改进的 SEO:Google、Bing 和 YouTube 等搜索引擎在对网页进行排名时会考虑很多因素。 例如,他们会检查用户体验、人们在您的页面上花费的时间以及加载速度。 SSR 改进了所有这些领域,这意味着您的应用程序可能会在搜索引擎上排名更高。
  • 易于处理动态内容:搜索引擎喜欢动态内容。 借助 SSR,开发人员现在可以轻松处理动态内容,还可以根据用户输入和偏好个性化/定制内容。
  • 可扩展性和缓存:在SSR中,服务器进行初始加载,这减少了客户端应处理的处理量并使其更具可扩展性。 SSR 还可以使用服务器级和内容分发网络 (CDN) 缓存来减少服务器负载并提高性能。

一些不同的工具和框架实现了 SSR。 有些设计仅支持服务器端渲染,而另一些则旨在支持客户端和服务器端渲染。 这些是您在 Web 开发领域中可能会遇到的一些最常见的交互:

Vue.js

Vue.js 是一个用于构建用户界面的 JavaScript 框架,基于标准 JavaScript、HTML 和 CSS 构建。 借助此框架,您可以使用其基于组件的声明式编程模型构建简单和复杂的 UI。

默认情况下,Vue 组件在浏览器中生成和操作文档对象模型 (DOM) 作为输出。 不过,这个框架也使用SSR将这些组件渲染成服务器上的HTML字符串,然后直接发送到浏览器。 服务器渲染的 Vue 应用程序被认为是“通用的”,因为大多数代码在服务器和客户端上运行。

React.js

反应 是一个用于构建用户界面的 JavaScript 库。 该库使用基于组件的编程模型,您可以将应用程序拆分为小的可重用组件。 React 也是声明性的,使得代码易于预测和调试。

React 被设计为默认实现客户端和服务器端渲染。 如果您需要在 React 应用程序上实现服务器端渲染,则必须使用 Node.js 应用程序框架(如 Express.js)进行设置。 您还必须更新 package.json 文件中的脚本,以确保应用程序从 Express 服务器“启动”。

盖茨比

盖茨比 是一个基于 React 的网站构建框架。 这个开源框架旨在帮助开发人员构建快速的 Web 应用程序。 Gatsby 与 Drupal 和 WordPress 等各种内容管理系统集成,可以轻松获取数据。

您需要一个 Node.js 服务器来设置 Gatsby 上的服务器端渲染。 SSR 运行在 Gatsby Cloud 上,其中每个请求都会发送到 getServerData 函数中的工作进程。 来自工作进程的所有数据都会传递到返回 HTML 文档的 React 组件。

是一个使用 TypeScript 构建的开发平台。 该平台有一个基于组件的框架,可用于构建 Web 应用程序。 您可以使用 Angular 构建小型和企业级应用程序。

与 React 一样,Angular 默认情况下并不实现 SSR。 但是,您可以将 Angular 应用程序与 Node.js 后端框架 Express.js 结合起来,以实现服务器端渲染。 Angular Universal 允许您在服务器上渲染 Angular 组件并减少初始加载时间。

如何检查网站是否使用 SSR 或 CSR

如果您是开发人员或营销人员,则在访问网站时很难确定该网站是使用服务器端渲染还是客户端渲染。 幸运的是,您可以检查网站以确定其使用的渲染方法。 我们可以检查我们的网站 techblik.com 来演示。 我将右键单击任何页面,然后选择“查看页面源代码”。

如果您可以看到像

    • 这样的标签,那么您就可以确定它们正在服务器端运行。

      服务器端渲染的局限性

      • 增加代码复杂性:实现服务器端渲染可能需要在服务器端进行额外的配置。 这种方法可能会导致服务器端的代码库增加,从而难以维护。
      • 服务器负载增加:尽管我们强调 SSR 可以缩短加载时间,但在高流量时它也可能成为性能瓶颈。 服务器负责渲染 HTML 内容,这有时可能会使服务器过载,甚至导致崩溃。

      服务器端渲染与服务器端标记相同吗?

      不会。服务器端渲染是一种 Web 开发方法,服务器将完全加载的 HTML 页面发送到浏览器。 SSR 旨在增加快速初始加载时间并改善 SEO。

      客户端标记是所有分析和跟踪都在服务器端完成的地方。 当标签在服务器上处理时,客户端的浏览器不再需要处理此类过程,从而提高了安全性并提高了性能。 了解服务器端标记以更好地理解它。

      结论

      对于每个希望通过增加加载时间和改善用户体验来提高应用程序性能的 Web 开发人员来说,服务器端渲染是一个不错的选择。

      另一方面,如果实施得不好,SSR 可能会具有挑战性,因为代码很难维护。 然而,SSR 的好处远远大于挑战,这就是许多组织采用它的原因。

      接下来,您还可以了解使用服务器端标记而不是客户端标记的原因。