服务器渲染和客户端渲染

举报
搞前端的半夏 发表于 2022/06/30 21:48:10 2022/06/30
【摘要】 网站开发干刚刚兴起的时候,大多数的页面显示的仅仅是静态页面!当时的页面是几乎没有办法与之交互的!当时托管一个这样的网站的目标仅仅是:提供有关公司以及产品的信息!增加销售渠道! 当时将HTML显示出来的方法就是通过服务器呈现!将HTML代码上传到服务器是唯一的选择,并由服务器来进行渲染!您还记得大多数网页仅显示静态内容的时候吗?快进到今天,大多数网站已经不仅仅是带有内容的静态页面,他们更像是伪...

网站开发干刚刚兴起的时候,大多数的页面显示的仅仅是静态页面!当时的页面是几乎没有办法与之交互的!当时托管一个这样的网站的目标仅仅是:提供有关公司以及产品的信息!增加销售渠道! 当时将HTML显示出来的方法就是通过服务器呈现!将HTML代码上传到服务器是唯一的选择,并由服务器来进行渲染!
您还记得大多数网页仅显示静态内容的时候吗?

快进到今天,大多数网站已经不仅仅是带有内容的静态页面,他们更像是伪装成应用程序的网页。我们可以发送消息,购物,甚至于视频!带来这种变化的就是服务器渲染逐渐让位于客户端先让网页技术!

什么是服务器端渲染

当用户请求网页时,服务器通过检索用户特定数据并通过服务器端渲染,通过互联网将其发送到用户的机器来生成 HTML 页面。浏览器来解析内容,并显示页面!从数据库检索数据、生成 HTML 页面并将其传输到客户端的整个过程需要几毫秒。

假设用户点击网站上的链接,浏览器向服务器发送请求,服务器处理其余过程。这种操作不仅给服务器带来了更大的压力,而且还浪费了互联网带宽。

什么是客户端渲染

客户端渲染是最近才出现的网站渲染技术!

当我们谈论客户端渲染时,我们谈论的是使用 JavaScript 在浏览器中渲染内容。不是从 HTML 文档中获取所有内容,而是在初始加载时接收带有 JavaScript 文件的基本 HTML 文档,该文档使用浏览器呈现站点的其余部分。

使用客户端渲染时,初始页面加载自然会延迟。在那之后,每个后续的页面加载都快如闪电。在这种方法中,与服务器的通信仅限于检索运行时数据。此外,无需在每次服务器调用后重新加载整个 UI。通过仅重新渲染单个 DOM 元素,客户端框架能够使用更改的数据刷新 UI。

服务器渲染的好处

  1. 为了获得更好的 SEO,搜索引擎可能会抓取该网站。
  2. 页面一开始加载速度更快。
  3. 它非常适合静态网站。

服务器渲染缺点

  1. 对服务器的请求很频繁。
  2. 总的来说,页面渲染很慢。
  3. 整个页面重新加载。
  4. 缺少网站之间的交互。

客户端优点

  1. 网络上的互动非常丰富。
  2. 初始加载后,网页会快速呈现。
  3. 非常适合基于 Web 的应用程序。
  4. 有大量的 JavaScript 库可用。

客户端缺点

  1. 如果做得不好,SEO将会受到影响。
  2. 初始加载可能需要更长的时间。
  3. 在大多数情况下,需要一个外部库。

既然知道每种策略的优缺点,让我们看看它们应用的一些理想场景。

何时使用服务器端渲染

  • 应用程序的用户界面非常简单,只有很少的页面和功能。
  • 应用程序中的动态数据较少。
  • 该网站对阅读的偏好大于对写作的偏好。

何时使用客户端渲染

  • 应用程序的用户界面极其复杂,具有众多页面和功能。
  • 具有大量动态数据集的应用程序更喜欢写入而不是读取。
  • 拥有大量用户的丰富网站。

结论

简而言之,服务器端渲染类似于接收预先组装好的玩具火车组,而客户端渲染类似于接收已经解构并且必须重新组装的玩具火车组。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。