客户端渲染(CSR)和服务端渲染(SSR)差别

最新推荐文章于 2023-04-27 14:16:42 发布
最新推荐文章于 2023-04-27 14:16:42 发布
阅读量269 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sy12_0/article/details/127100888
版权

前端

文章目录

客户端渲染

当用户发送请求返回页面，此时页面只是一个模板页面，浏览器解析页面的代码是通过js读取时，根据我们所写的接口去请求数据，得到返回的数据使用页面的模板渲染。页面的模板是通过模板引擎（vue等）进行渲染，渲染完后注入到网站中。不便于搜索引擎爬取所需要的类容

服务端渲染

用户请求页面，后端先取回到一些数组之后通过后端的渲染引擎把提供给页面的模板注入读到的数据，把渲染好的数据扔到页面结构里，把携带数据的页面结构返回给客户端，浏览器去渲染时收索引擎就能爬取到数据。（数据由服务端渲染）

两者区别

客户端渲染可以减轻服务端的压力，达到前后端分离开发，但是对SEO优化不是特别的好，服务端渲染对SEO优化非常好，单对服务器性能要求高，不利于前后端分离开发。

Deng_XX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
服务端渲染和客户端渲染的区别
weixin_49983224的博客
04-20 1741
1.什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容渲染，而不是在客户端完成页面内容的渲染。 SSR并不是前端特有的技术，我们学习过的JSP技术和Thymeleaf技术就是典型的SSR 服务端渲染的特点： 在服务端生成html网页的dom元素 客户端（浏览器）只负责显示dom元素内容 2.什么是客户端渲染 客户端（浏览器） 使用AJAX向服务端发起http请 求，获取到了想要的数据，开始渲染html网页，生.
服务端渲染（SSR) 和客户端渲染（CSR）
weixin_42910765的博客
01-05 675
一、服务端渲染（SSR）是什么 用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将 html 拼接好的，然后返回给前端完整的 html 文件，浏览器拿到这个 html 文件之后就可以直接解析展示了，这也就是所谓的服务器端渲染。 将组件或页面通过服务器生成HTML字符串，在发送到游览器，最后将静态标记 “混合”为客户端上完全交互的应用程序。 二、客户端渲染（CSR）是什么 随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，可能是添加更多功能的组件，复杂性更大，另外，此时 a
服务器渲染与客户端渲染，如何选择？
掘金安东尼
07-18 283
服务器渲染 与 客户端渲染 何为渲染？ 如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。 但这是基本不可能的事情，数据一般是变化的。 你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染。 这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。 简单来说：渲染，就是指 数据 放入 html模板文档的过程。 服务器渲染 后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用
服务端渲染SSR与客户端渲染
莫宛的博客
11-05 715
一、服务端渲染和客户端渲染的区别 服务端渲染SSR是指：在服务端对页面进行渲染，把请求得到的数据插入页面html结构。客户端渲染是指：在客户端对页面进行渲染，在客户端解析页面js，遇到ajax就异步请求数据，并插入页面html结构。二、使用服务端渲染（SSR）的利弊 服务端渲染可以被爬虫抓取到，客户端异步渲染很难被爬虫抓取。更利于首屏渲染。服务端压力较大。三、实际应用应用原则真正的网站会采用两者结合的方式来实现。需要seo时，采用服务端渲染。侧重效率和用户体验时，采用客户端渲染，ajax异步刷新
Vue：CSR（客户端渲染）、SSR（服务端渲染）、同构渲染
前端御书房
11-12 1088
CSR（客户端渲染） 是在浏览器中完成模板与数据的融合，并渲染出最终的 HTML 页面。
vue---SSR与CSR
maidu_xbd的博客
04-27 240
首次页面加载要等到资源都加载执行完，用户才可以进行操作；更快的内容到达时间 (time-to-content)：特别是对于缓慢的网络情况或运行缓慢的设备，用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程；更好的 SEO：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo。
客户端渲染（CSR） 和 服务端渲染（SSR）的对比
qq_42760049的博客
03-26 1419
客户端（前端）渲染 VS 服务端渲染 客户端渲染（CSR, Client Site Rendering） 定义：html 仅仅作为静态文件，客户端端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，生成 DOM 插入 html。 特点：fat-client，thin-server 服务端渲染（SSR, Server Site Re...
egg-vue-webpack-boilerplate：Egg Vue服务器端渲染（SSR）客户端渲染（CSR）
02-06
基于Egg + Vue + Webpack SSR服务端渲染和CSR前端渲染工程框架项目，包括前台系统（SSR MPA）和后台管理系统（SSR SPA）。 文件 系统功能 前台博客系统 采用Egg + Vue服务端渲染 博客首页 文章列表 文章详情 后台...
JS面试题17-比较一下服务端渲染与客户端渲染
itclanCoder
03-12 464
服务端渲染服务端渲染（Server-Side Rendering，SSR）是指在服务器端生成完整的HTML页面并将其返回给浏览器，与传统的客户端渲染方式相反。在传统的客户端渲染中，浏览器首先接收到一个空的HTML页面，在页面加载期间，浏览器使用JavaScript来动态生成页面内容。而在服务端渲染中，服务器端负责构建整个HTML页面，包括将数据和组件渲染为HTML，然后将整个HTML页面返回给浏览...
服务端渲染ssr（server side render）
guanan1230的博客
05-17 1713
1 - 什么是服务器端渲染？ server side render 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染 1.1 新建server文件夹 ``` server ``` 1.2 生成一个node项目 ```bash npm init -y ``` 1.3 安装express [express](https://www.expressjs.com.cn/) 官方文档 ```bash npm install express --save ``` 1.4 服务端渲染小案
前端页面渲染方式CSR、SSR、SSG
做一个有趣的妞儿
06-23 3002
三种渲染方式：使用预渲染之前，首先要考虑是否真的需要它。如果初始加载时的额外几百毫秒并不会对应用产生影响，这种情况下去使用预选染将是一个小题大作之举。首屏加载时间是绝对关键的指标，在这种情况下，如果是静态页面渲染可采用SSG的方式，如果需要页面交互则采取SSR的方式。静态页面、需要SEO流量的项目、以及用户增长型项目，如：博客、活动页面、app官网等，适用于预渲染的方式。大部分中后台项目都更加适用于客户端渲染（CSR）方式CSR（client side render）：客户端渲染，服务端返回一个html文件
Vue进阶篇三 服务器端渲染 同构的本质、 SSR 和 CSR
m0_55170432的博客
06-30 774
1 - 什么是服务器端渲染？ server side render 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染 1.1 新建server文件夹 server 1.2 生成一个node项目 npm init -y 1.3 安装express express 官方文档 npm install express --save 1.4 服务端渲染小案例 app.js const express = require('express') const app = express() const
ssr与csr的优异
TangAcrab的博客
11-05 6397
一、CSR客户端渲染的模式（vue、react） 页面由js渲染，js运行于浏览器端，所以称客户端渲染。 基于react的csr渲染流程： 浏览器下载html文档→下载js→运行react代码渲染页面→展示页面 优势： 1.前后端分离的架构，利于开发效率的提升 缺点： 1、TTFP 首屏渲染时间比较长（首屏加载速度慢） 2、不能SEO （搜索引擎优化） 。大多数搜索引擎的爬虫只能识别html中的...
03-vue中补充(渲染方式SSR与CSR,nuxt[简单说安装,路由,视图,异步数据,生命周期],vuex简单说,keepalive)
Tangoneone的博客
06-26 613
关于优化 01 - SPA 在 vue 这个阶段中我们所学的： 黑马面面项目 & 黑马头条项目。其实都是单页应用 全称：Single Page Application （单页面应用） 概念： 网站的效果都是显示在一个静态页面中的 在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改 在网站的源代码中是看不到任何数据（关键字）的 特点： 优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA
nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题
qinyi8888的博客
02-15 3241
原文链接：https://blog.csdn.net/weixin_33841503/article/details/94087276 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect...
SSR和CSR的区别
窄门狭路的博客
05-28 2057
SSR和CSR的区别 SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。 CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。 简而言之，就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别
CSR、SSR、SPA是什么
yiyueqinghui的博客
09-16 1003
1、前沿 1.1、什么是SSR SSR（服务端渲染）顾名思义就是将页面在服务端渲染完成后在客户端直接展示。 1.2、客户端渲染与服务端渲染的区别 传统的SPA模式，即客户端渲染的模式 Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 ->
服务端渲染or客户端渲染
weixin_51670675的博客
04-27 2975
服务端渲染与客户端渲染的区别
给我讲一下服务端渲染SSR
最新发布
08-04
3. 更好的可访问性：由于服务端渲染生成的页面已经包含了完整的内容和结构，相对于客户端渲染，能够更好地支持辅助功能和设备兼容性。 尽管SSR在首屏加载和SEO方面具有很大的优势，但也存在一些限制和挑战。比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值