客户端渲染和服务端渲染的区别

电玩女神 2021-12-03 20:04 374阅读 0赞

**服务端渲染**：DOM树在服务端生成，然后返回给前端。

**客户端渲染**（SSR）：前端去后端取数据生成DOM树。

**服务端渲染的优点**：

1、尽量不占用前端的资源，前端这块耗时少，速度快。

2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

**服务端渲染的缺点**：

1、不利于前后端分离，开发的效率降低了。

2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。

**客户端渲染的优点**：

1、前后端分离，开发效率高。

2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。

**客户端渲染的缺点**：

1、前端响应速度慢，特别是首屏，这样用户是受不了的。

2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。

**服务端和客户端渲染的区别**：

1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染：

源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。

应该使用服务端渲染还是客户端渲染：

我们要根据业务场景去选择渲染的方式。

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用**服务端渲染和客户端渲染结合**的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

转载于:https://www.cnblogs.com/wuqilang/p/11202475.html

发表评论取消回复

表情：

评论列表（有 0 条评论，374人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js 中的服务端渲染和客户端渲染的区别

Vue.js 中的服务端渲染和客户端渲染的区别 Vue.js 是一个流行的前端框架，它提供了一种简单而强大的方式来构建交互式用户界面。Vue.js 可以在客户端和服务端执

灰太狼/ 2024年03月16日 14:13/ 0 赞/ 46 阅读

相关前端发展史-服务器渲染时代和客户端渲染时代

服务器渲染时代 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朴灿烈づ我的快乐病毒、/ 2022年12月14日 08:50/ 0 赞/ 201 阅读

相关 Nuxt服务端渲染-接口服务端渲染

在server里面启动server-api服务后再起一个命令行窗口，再npm run dev启动项目服务先安装axios cnpm install axios -

心已赠人/ 2022年10月17日 05:59/ 0 赞/ 232 阅读

相关服务器端渲染和客户端渲染有什么区别？

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1][] 我们在walmart.com网站上的大多数页面采用服务器端渲染（简称SSR）方式

怼烎@/ 2022年06月16日 06:18/ 0 赞/ 280 阅读

相关 SSR（服务端渲染）

客户端渲染：在服务端放了一个html 页面，里面有客户端发起请求，服务端把页面（响应的是字符串）发送过去，客户端从上到下依次解析，如果在解析的过程中，发现ajax

阳光穿透心脏的1/2处/ 2022年05月11日 14:18/ 0 赞/ 308 阅读

相关客户端渲染和服务端渲染的区别

服务端渲染：DOM树在服务端生成，然后返回给前端。客户端渲染（SSR）：前端去后端取数据生成DOM树。服务端渲染的优点：　　1、尽量不占用前端的资源，前端这块耗时少

电玩女神/ 2021年12月03日 20:04/ 0 赞/ 375 阅读

相关服务端渲染和客户端渲染区别？

首先，介绍一下 SPA、SEO、SSR 三者的区别 SPA（single page application）单页面应用，是前后端分离时提出的一种解决方案。

太过爱你忘了你带给我的痛/ 2021年11月22日 14:44/ 0 赞/ 375 阅读

相关服务端渲染和客户端渲染有啥不同

什么是服务端渲染? 我们用传统的servlet开发来举例：浏览器请求servlet，servlet在服务端生成html响应给浏览器，浏览器展示html 的内容，servl

- 日理万妓/ 2021年10月13日 00:32/ 0 赞/ 453 阅读

相关服务端渲染客户端渲染

渲染页面上的数据要发生更新服务端渲染后台语言通过一些模板引擎生成html 好处：前端耗时少（前端只负责将html进行展示），利于SEO 坏处：网络传输数据量大，

朴灿烈づ我的快乐病毒、/ 2021年09月18日 08:58/ 0 赞/ 556 阅读

相关服务端渲染客户端渲染区别

何为渲染？页面上的数据要发生更新，就是渲染。这个工作放在服务器进行就是服务器渲染，放在浏览器进行就是浏览器渲染。服务器端渲染，指的是后台语言通过一些模板引擎生成

r囧r小猫/ 2021年09月18日 08:56/ 0 赞/ 405 阅读