SSR和CSR区别

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: SSR和CSR区别

SSR:Server-side rendering (server 服务器)(side有边的意思 所以在这里

翻译为服务器的一边也就是服务器端)而rendering 的意思则是渲染的意思



CSR:Client-side rendering(Client则是客户端的意思)后边的英文则和上边

一样了


在做区别之前我们先了解一下SSR和CSR的渲染过程分别是什么样的


SSR:服务器端渲染

1. 用户输入url地址 客户端向服务器发送url请求

2.服务器接收到客户端的url请求后 直接对网页文件进行操作 例如(模板引擎)

然后将网页文件中需要的数据直接放到这个文件中 此时这个时候已经将文件的

渲染处理好了 然后再发给客户端 (也就是把文件渲染任务做好之后再发给客户端)

3. 浏览器拿到渲染好了的网页文件 直接渲染在页面上


CSR:客户端渲染

1. 用户输入url地址 客户端向服务器发送url 请求数据

2. 服务器接收到请求 将html css js等文件 ”不做任何操作“返回给客户端

3. 接收到文件后 从上到下开始解析文件 但是在这个过程中如果遇到了类似于

ajax请求这种还需要再次像服务器请求数据的操作就会再去向服务器请求一次

然后服务器再把请求的内容返回给客户端

4.客户端拿到二次请求的数据 开始将数据渲染到相对应的位置然后展现出来


相同上边的对比理解:

1. 服务器端渲染相比于 客户端渲染 会至少多一次 客户端到服务器的请求 这也就

会导致浏览器的首屏加载速度变慢 因此就有了服务器端渲染也就是SSR


来说一下SSR和SCR各自的优缺点

CSR:客户端渲染

优点:

1. 前后端分离 开发效率高

2. 用户体验好 因为SPA 单页面应用的开发模式

缺点:

1. 前端响应速度慢 特别是首屏 可能会导致用户流失

2. 不利于SEO优化 因为客户端渲染页面的代码中只有一个空代码 SEO爬虫无法

获取关键词

(那么为什么会出现代码只有空代码的情况呢?)

这里说一下

因为 我们的CSR客户端渲染是一种叫做动态渲染的渲染方式

我们回顾一下流程 解析html css js文件 过程中 我们页面中的大部分DOM元素

都是通过js插入的 但是js文件是需要下载解析的 但是在下载解析之前 就已经开始

构建DOM树了  所以在一开始会是一个空壳子 需要等待下载好了 js文件并解析完毕后

才会有内容

那为什么SSR服务器端渲染不会出现这种空壳子的情况呢?

因为通过上边我总结的表也能看出来 在第一次发送url请求的时候 服务器就开始

帮助我们进行对html文件的渲染和组装了 当服务器端返回的时候 返回回来的会是

一个已经全部渲染完的html文件 我们客户都也就是前端只需要负责渲染就行了

所以不会出现这种空壳子的情况


SSR:服务器端渲染

优点:

1. 尽量不占用前端的资源 ,前端只需要负责呈现 耗时少,速度快

2. 有利于SEO优化 因为在后端有完整的html页面 也就是MPA多页面应用模式

所以爬虫更容易获取信息

(这里稍微说一下我理解的SPA和MPA

SPA:单页面应用 看他的名字也能知道他就是一个单页面 而路由跳转其实都是

组件嵌套的关系 也就是局部更新 页面没有改变

MPA:多页面应用 每次跳转路由都会是一个新的页面 每次跳转都会刷新页面

因为是全新的一个页面 所以他是全部更新 相比于单页面应用的局部更新肯定是

没有单页面应用的模式加载内容快的 因为 一个是只加载一部分需要修改的内容

一个是需要全部加载 这一点显而易见 但是MPA有完整的html页面所以在SEO优化

也就是爬取关键词这方面相比于SPA肯定也是优于SPA的)


缺点:

1. 不利于前后端分离,主要工作在后端 前端显示没啥用 开发效率慢

2. 前端首屏响应速度变化,但是加大了服务器的压力

相关文章
|
数据采集 前端开发 JavaScript
服务器端渲染(SSR)与客户端渲染(CSR)的比较
服务器端渲染(SSR)与客户端渲染(CSR)的比较
1180 0
|
JSON 前端开发 数据库
学习nest.js中如何使用jwt进行身份验证,这一篇文章就够
学习nest.js中如何使用jwt进行身份验证,这一篇文章就够
|
5月前
|
JavaScript 前端开发 搜索推荐
CSR、SSR与同构渲染全方位解析
CSR、SSR与同构渲染全方位解析
94 0
|
3月前
|
JavaScript 前端开发 安全
VUE——APP,后端,前端三端AES加密解密
VUE——APP,后端,前端三端AES加密解密
160 0
|
6月前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
50 2
|
6月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
59 0
|
6月前
|
前端开发 搜索推荐 JavaScript
AJAX和CSR的优缺点是什么
AJAX和CSR的优缺点是什么
54 1
|
6月前
|
XML 前端开发 JavaScript
CSR和 AJAX有什么区别
CSR和 AJAX有什么区别
62 1
|
6月前
|
数据采集 JavaScript 前端开发
服务器端渲染(SSR)和客户端渲染(CSR)
服务器端渲染(SSR)和客户端渲染(CSR)
116 1
|
6月前
|
JavaScript 前端开发 搜索推荐
VueSSR和 CSR有什么区别
VueSSR和 CSR有什么区别
91 0