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

文章目录

一、服务端渲染和客户端渲染的区别
- 服务端渲染（SSR -- server side render）
- 客户端渲染
二、使用服务端渲染（SSR）的利弊
- 优势
- 局限
三、实际应用
- 应用原则
- 举例
四、参考链接

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

服务端渲染（SSR – server side render）

服务端渲染SSR是指：在服务端对页面进行渲染，把请求得到的数据插入页面html结构。

浏览器请求页面时，服务端响应的body中就返回了渲染好的页面html结构。浏览器仅需加载css即可。

客户端渲染

客户端渲染是指：在客户端对页面进行渲染，在客户端解析页面js，遇到ajax就异步请求数据，并插入页面html结构。

使用客户端渲染，当请求页面时，返回的body里为空，从上到下依次解析，在解析的过程中，如果发现ajax请求，则再次发起新的请求，拿到动态数据后，渲染成完整的html并注入到body里，结合css显示出来；

二、使用服务端渲染（SSR）的利弊

优势

利于SEO

服务端渲染可以被爬虫抓取到，客户端异步渲染很难被爬虫抓取。
原因：爬虫工作时不会执行网站的任何脚本。
- 采用服务端渲染时，返回给客户端的是已经获取了异步数据并执行js脚本的最终html，网络爬虫就可以抓取到完整页面的信息。从而可以被搜索引擎抓取，但同时也可能被恶意爬虫抓取造成数据泄露。
- 采用客户端渲染时，异步数据无法被抓取，尤其是使用了React、Vue等MVVM框架后，页面的DOM元素大多在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。
更利于首屏渲染

首屏的渲染是node发送的html字符串，客户端只需一次请求即可拿到整个页面。尤其针对大型单页应用，避免了首屏加载的长时间白屏等待。

局限

服务端压力较大

本来通过客户端完成渲染，现在统一到服务端node服务实现，在高并发访问时，会大量占用服务端CPU资源；
学习成本较高

除了对webpack和React/Vue熟悉，还需要掌握node、Koa2等相关技术。与客户端渲染相比，项目构建和部署的过程更加复杂。

三、实际应用

应用原则

真正的网站会采用两者结合的方式来实现。

需要seo时，采用服务端渲染
侧重效率和用户体验时，采用客户端渲染，ajax异步刷新获取数据

举例

单页面应用的首屏为了SEO，往往会采用服务端渲染。【也就是希望首页信息能够被浏览器搜索到，网站搜索排名更高】
购物网站的商品信息为了SEO，也会采用服务端渲染。【希望商品信息能够被浏览器搜索到，从而得到更高的销量】
评论信息等不需要考虑SEO的内容，一般会采用客户端渲染，通过ajax异步获取，从而获得更好的用户体验。

四、参考链接

浅谈服务端渲染(SSR)
黑马程序猿nodejs视频教程（李鹏周）

服务端渲染SSR与客户端渲染相关推荐

什么是服务器渲染(SSR)、客户端渲染
什么是服务器渲染.客户端渲染一.介绍 1.1 服务端渲染(SSR) 简述: 又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解 ...
SSR 服务端渲染与 CSR 客户端渲染
SSR 服务端渲染与 CSR 客户端渲染 SSR 服务端渲染 CSR 客户端渲染本文要点: 介绍 SSR 服务端渲染概念.优点.缺点.案例及常用框架. 介绍 CSR 服务端渲染概念.优点.缺点. S ...
客户端渲染CSR、服务器端渲染SSR、预渲染Prerendering
什么是客户端渲染 CSR 在进行SPA(单页面应用)开发时,大多数都会选择Vue.js.默认情况下,会生成vue组件,输出到浏览器,进行生成 DOM 和操作 DOM.使用vue.js开发的项目在浏览器 ...
SAP UI渲染模式：客户端渲染 VS 服务器端渲染
今年由于疫情原因,SAP一年一度的DKOM(Developer Kick-Off Meeting)切换成了线上模式,刚刚于昨天圆满落幕. 时间过得真快,去年的DKOM仿佛还历历在目:SAP成都研究院数 ...
Qt 多线程TCP服务端一键关闭所有客户端
Qt 多线程TCP服务端一键关闭所有客户端任务描述: 实现多线程TCP服务端一键关闭所有客户端的连接. 解决过程: 1.Qt的服务端提供了close的功能,但是只用来不响应新接入的客户端. 手册中是 ...
启动go服务_内网穿透工具 FRP公网服务端、内网客户端快速配置文件说明
内网穿透工具 FRP 公网服务端.内网客户端 frps.ini .frpc.ini 配置文件常用设置展示及说明公网服务端 frps.ini 配置文件常用设置公网服务端配置文件:frps.ini [ ...
git的CentOS服务端安装和windows客户端的使用
git的CentOS服务端安装和windows客户端的使用此教程以 ***vps CentOS 6 x64 的系统为环境,搭建 git 服务端.windows 7 系统为客户端. git客户端在W ...
socket服务端处理多个客户端的请求学习理解
socket服务端处理多个客户端的请求: while(true){ Socket s=ss.accept(); new WorkThread(s).start(); } class WorkThrea ...
【Socket编程】Python实现一个服务端，多个客户端接入
Python实现一个服务端,多个客户端接入 1. 服务器端服务器端每一次接收客户端连接,都要fork一个进程来完成,如果单纯使用socket模块来实现,是不容易完成多线程接入的.为了方便,可以直接使 ...

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

文章目录

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

服务端渲染（SSR – server side render）

客户端渲染

二、使用服务端渲染（SSR）的利弊

优势

局限

三、实际应用

应用原则

举例

四、参考链接

服务端渲染SSR与客户端渲染相关推荐

最新文章

热门文章