服务端渲染和客户端渲染区别？
首先，介绍一下 SPA、SEO、SSR 三者的区别
- SPA（single page application） 单页面应用，是前后端分离时提出的一种解决方案。
优点：页面之间切换快；减少了服务器压力；
缺点：首屏打开速度慢，不利于 SEO 搜索引擎优。 - SEO（search engine optimization）搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
我们之前说 SPA 单页面应用，通过 ajax 获取数据，这就难保证我们的页面能被搜索引擎收到。并且有一些搜索引擎不支持的 js 和通过 ajax 获取的数据，那就更不用提 SEO 了，为解决这个问题，SSR 登场了··· - SSR （server side rendering）服务端渲染，SSR 的出现一定程度上解决了 SPA 首屏慢的问题，又极大的减少了普通 SPA 对于 SEO 的不利影响。
优点：
更快的响应时间，不用等待所有 js 都下载完成，浏览器便能显示比较完整的页面；
更好的 SSR，我们可以将 SEO 关键信息直接在后台就渲染成 html，从而保证搜索引擎都能爬取到关键数据。
缺点：
占用更多的 CUP 和内存资源；
一些常用的浏览器的 api 可能无法正常使用，比如 window，document，alert等，如果使用的话需要对运行环境加以判断。
什么是服务器端渲染和客户端渲染？
互联网早期，用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将 html 拼接好的，然后返回给前端完整的 html 文件，浏览器拿到这个 html 文件之后就可以直接解析展示了，这也就是所谓的服务器端渲染。而随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，可能是添加更多功能的组件，复杂性更大，另外，此时 ajax 的兴起，使得页面就开始崇拜前后端分离的开发模式，即后端不提供完整的 html 页面，而是提供一些 api 使得前端可以获取 json 数据，然后前端拿到 json 数据之后再在前端进行 html 页面的拼接，然后展示在浏览器上，这就是所谓的客户端渲染，这样前端就可以专注 UI 的开发，后端专注与逻辑开发。
两者本质的区别？
客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接，如果是在服务器端完成的，然后返回给客户端，就是服务器端渲染，而如果是前端做了更多的工作完成了html的拼接，则就是客户端渲染。
服务器端渲染的优缺点是？
优点：
- 前端耗时少。因为后端拼接完了html，浏览器只需要直接渲染出来。
- 有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，更有利于seo。
- 无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的html页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电。
- 后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效 。
缺点：
- 不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。另外，如果是服务器端渲染，则前端一般就是写一个静态html文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作； 或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端还需要根据改动的模板再调节css，这样使得前后端联调的时间增加。
- 占用服务器端资源。即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器。
客户端渲染的优缺点是？
优点：
- 前后端分离。前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
- 体验更好。比如，我们将网站做成SPA或者部分内容做成SPA，这样，尤其是移动端，可以使体验更接近于原生app。
缺点：
- 前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快。
- 不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差。因为服务器端可能没有保存完整的html，而是前端通过js进行dom的拼接，那么爬虫无法爬取信息。 除非搜索引擎的seo可以增加对于JavaScript的爬取能力，这才能保证seo。
使用服务器端渲染还是客户端渲染？
不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的SEO，则这时我们就需要使用服务器端渲染；而类似后台管理页面，交互性比较强，不需要seo的考虑，那么就可以使用客户端渲染。
另外，具体使用何种渲染方法并不是绝对的，比如现在一些网站采用了首屏服务器端渲染，即对于用户最开始打开的那个页面采用的是服务器端渲染，这样就保证了渲染速度，而其他的页面采用客户端渲染，这样就完成了前后端分离。
服务端渲染和客户端渲染区别？相关推荐
- 【SSR和CSR】服务端渲染和客户端渲染区别？如何快速分辨页面是SSR还是CSR？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application)单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: 缺 ...
- 如何快速判断页面是服务端渲染还是客户端渲染
什么是服务器端渲染和客户端渲染? 互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文 ...
- 服务端渲染vs客户端渲染到前后端同构
关于服务端渲染与客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解. 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
- 服务端渲染与客户端渲染详解（vue）
1.客户端请求 (1)用户在浏览器输入请求的地址例如:172.0.0.1:8080 到服务器 服务器接受到客户端的请求拿到一个没有被数据渲染的空页面 (2)客户端拿到服务端的空字符串页面,然后从上往下 ...
- 服务端渲染or客户端渲染
其实,服务端渲染不是一个新鲜的事情. 最开始的时候,其实网站都是服务端渲染的,后来是出现SPA框架进行客户端渲染.现在热点又回归服务端渲染. 通过这篇文章,带你了解服务端渲染和客户端渲染是怎么一回事. ...
- 关于服务器渲染与客户端渲染的区别
服务器渲染: 也称SSR.当浏览器发送请求时,在服务器上渲染完整的第一个屏幕dom结构,即将数据与html整合,之后返回给浏览器. 客户端渲染: 当浏览器发送请求后,服务器只会发送html框架,浏览器 ...
- 浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染 前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
- React的服务器渲染和客户端渲染
React的服务器渲染和客户端渲染 简单谈一谈React服务器渲染和React客户端渲染 首先我们来区分一下: React客户端渲染 和 React服务端渲染 两者的区别: React客户端渲染: 1 ...
- ssm配置socket_ssm框架中集成websocket实现服务端主动向客户端发送消息
找了很多配置文档及实例说明,也还是没能成功,最终在csdn博客中发现了基于stomp的消息推送的文章, 下面整理自csdn博客,https://blog.csdn.net/u013627689/art ...
最新文章
- Web服务器和应用程序服务器有什么区别
- 资源跳转--response重定向和request转发
- [分布式]事务处理的常见方法
- php ci 表单校验,表单验证 - CodeIgniter 中文手册|用户手册|用户指南|Wiki文档
- Apache Commons：Betwixt介绍
- 湖北职称计算机考试报名时间2016,湖北2016年下半年职称计算机考试报名时间延长通知...
- thinkphp mysql高并发_WBB - ThinkPhp高并发提交如何保障数据正常
- dubbo之服务降级
- 5ecsgo正在发送客户端_MQTT X 桌面客户端使用指南
- [js方法pk]之instanceof() vs isPrototypeOf() hasOwnProperty() vs propertyIsEnumerable()
- 向已知EXCEL模板写入数据并导出
- JDK1.8优雅的集合排序(集合的排序)
- 故宫，中国古代建筑艺术的奇葩
- end 键功能的定义
- c语言日历显示系统,C语言实现显示日历
- 磁盘满了，却找不到大文件
- 简单解释计算机内存与外存的关系,内存和外存概念的严格解析
- 四年级计算机入门教案,四年级下册计算机教案
- android drawText()方法中x,y坐标值真正的 意义
- 提问的智慧 How To Ask Questions The Smart Way