服务器端渲染(SSR)和客户端渲染(CSR)的区别

最新推荐文章于 2025-08-02 10:35:08 发布
原创 最新推荐文章于 2025-08-02 10:35:08 发布 · 1.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入解析服务器端渲染和客户端渲染的区别，重点阐述了后端如何通过模板引擎生成HTML，以及前端如何通过动态加载数据实现页面展示。通过对比两种渲染方式的流程，帮助读者理解其工作原理。

常听到服务器端渲染和浏览器端渲染这兄弟俩，一直不是很理解，尤其对于我这种没有后台开发经验的小白来说，理解起来异常困难，最近花时间查了很多资料，总算弄明白了，于是整理下，加深记忆。
这边文章是参考下面的文章做的总结

服务器渲染

后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的（模板引擎），在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。

前端渲染

简单来说：客户端渲染，就是每个人从服务器获取到的html文件是一样的，再在客户端去通过接口获取数据，拼装成页面展示，

利弊

在这里插入图片描述

下图是前后端渲染的顺序图在这里插入图片描述

解释SSR（服务器端渲染）和CSR（客户端渲染）的区别
祈澈菇凉
02-25 1146
服务器端渲染是一种在服务器上生成 HTML 内容并将其发送到客户端的渲染方法。在这种模式下，当用户请求一个页面时，服务器会处理该请求，生成完整的 HTML 页面并返回给浏览器。浏览器接收到 HTML 后，直接渲染页面。
【前端】Next.js 服务器端渲染（SSR）与客户端渲染（CSR）的最佳实践
保持前进，即便速度慢，也不能停下脚步...
11-30 1667
通过上述详细说明和示例代码，我们可以更好地理解Next.js中的服务器端渲染（SSR）与客户端渲染（CSR）的区别及其最佳实践。选择合适的渲染方式取决于具体的应用场景和需求。在实际开发中，通常会结合使用两种方式，以达到最佳的性能和用户体验。此外，通过合理的架构设计、代码优化和性能监控，可以进一步提升应用的整体质量和用户体验。
服务端渲染和客户端渲染区别
weixin_30480075的博客
07-17 211
SPA、SEO、SSR 三者的区别? SPA（single page application） 单页面应用，是前后端分离时提出的一种解决方案。优点：页面之间切换快；减少了服务器压力；缺点：首屏打开速度慢，不利于 SEO 搜索引擎优。 SEO（search engine optimization）搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 我们之前说 SPA 单页...
服务器端渲染（SSR）和客户端渲染（CSR）的区别，以及优化首屏的一些思考
Wion Wan
03-26 7737
今天考虑一个项目性能问题的时候想到这个知识点，想着就梳理一下： SSR：Server side render 将组件或页面通过服务器生成html字符串，再发送到浏览器，简单理解下来，发了一个请求，服务器返回的不是接口数据，而是一整个页面的HTML结构，再结合界面之前定义的CSS把页面展示出来；VUE 服务器渲染文档 SSR优点 例如SEO–因为访问一个请求，返回的就是页面全部的HTML结构...
Vue 3 服务端渲染（SSR）与客户端渲染（CSR）的区别及解决方案
最新发布
分享前端工程化、动效魔法与性能之舞！
08-02 726
本文对比了Vue3中的服务端渲染(SSR)与客户端渲染(CSR)的区别。SSR在服务器端生成完整HTML，提升首屏速度和SEO性能，但增加服务器负载；CSR依赖浏览器计算，减轻服务器压力。重点介绍了SSR的关键技术：通过asyncData预取首屏数据，实现路由同步确保服务器与客户端渲染一致，以及状态同步方案。建议根据项目需求选择合适的渲染方式，在SSR中需特别注意数据预取和状态管理问题，以优化性能和用户体验。
SSR（服务端渲染）和BSR（客户端渲染）的区别
zhi航的博客
07-26 897
SSR和BSR SSR： 服务端渲染----------M+V发生在服务端 对营销 优势 服务器的压力更大。 页面访问和显示速度更快（DOM操作少）。 有利于 ( SEO ) 搜索引擎优化。 SEO: 网络爬虫程序，读取、记录数据。 爬虫最喜欢的HTML字符串：meta、h1-h6、语义化标签（article、header、nav…）alt属性、title属性 爬虫最讨厌 js 脚本，DOM操作 前后端不分离，对后端工程师的要求更高，工作量更大。 功能比较简单，交互简单的产品 BSR：客户端渲染----
服务端渲染SSR与客户端渲染
莫宛的博客
11-05 849
一、服务端渲染和客户端渲染的区别 服务端渲染SSR是指：在服务端对页面进行渲染，把请求得到的数据插入页面html结构。客户端渲染是指：在客户端对页面进行渲染，在客户端解析页面js，遇到ajax就异步请求数据，并插入页面html结构。二、使用服务端渲染（SSR）的利弊 服务端渲染可以被爬虫抓取到，客户端异步渲染很难被爬虫抓取。更利于首屏渲染。服务端压力较大。三、实际应用应用原则真正的网站会采用两者结合的方式来实现。需要seo时，采用服务端渲染。侧重效率和用户体验时，采用客户端渲染，ajax异步刷新
egg-vue-webpack-boilerplate：Egg Vue服务器端渲染（SSR）客户端渲染（CSR）
02-06
基于Egg + Vue + Webpack SSR服务端渲染和CSR前端渲染工程框架项目，包括前台系统（SSR MPA）和后台管理系统（SSR SPA）。 文件 系统功能 前台博客系统 采用Egg + Vue服务端渲染 博客首页 文章列表 文章详情 后台...
egg-vue-typescript-boilerplate:Egg Vue TypeScript服务器端渲染（SSR）客户端渲染（CSR）
05-10
:check_mark:︎单页应用程序，支持Vue服务器端渲染和客户端渲染模式，渲染缓存，自动降级 :check_mark:︎应用程序的前端和节点使用TypeScript编写，使用vue-property-decorator和vuex-class :check_mark:︎使用...
Egg Vue 服务器端渲染 (SSR) , 客户端渲染 (CSR).zip
12-01
egg-vue-webpack-样板基于Egg + Vue + Webpack的SSR服务端渲染和CSR前端渲染插件工程项目，包括前台系统(SSR MPA)和后台管理系统(SSR SPA)。文檔https://www.yuque.com/easy-team/egg-vue系统功能前台博客系统...
egg-react-typescript-boilerplate：Egg React TypeScript服务器端渲染（SSR）客户端渲染（CSR）
02-15
支持多页（MPA）和单页（SPA）服务端渲染（SSR）和前端渲染（CSR） 支持AntD按需加载和主题配置功能以及MobX应用 支持Webpack时时编译和热更新， npm run dev一键启动应用 支持开发环境，测试环境，正式环境Webpack...
服务器端渲染（SSR）和客户端渲染
weixin_44273311的博客
06-12 578
客户端渲染和服务器端渲染（SSR）
SSR和CSR区别
m0_73292513的博客
09-07 1198
CSR：Client-side rendering（Client则是客户端的意思）后边的英文则和上边。1. 服务器端渲染相比于 客户端渲染 会至少多一次 客户端到服务器的请求 这也就。都是通过js插入的 但是js文件是需要下载解析的 但是在下载解析之前 就已经开始。帮助我们进行对html文件的渲染和组装了 当服务器端返回的时候 返回回来的会是。翻译为服务器的一边也就是服务器端）而rendering 的意思则是渲染的意思。MPA：多页面应用 每次跳转路由都会是一个新的页面 每次跳转都会刷新页面。
SSR 和 CSR区别
码海逆行
02-05 1048
SSR 和 CSR区别
服务器端渲染和客户端渲染有什么区别？
热门推荐
u010620152的博客
05-08 1万+
我们在walmart.com网站上的大多数页面采用服务器端渲染（简称SSR）方式。之所以选择服务器端渲染，主要出于以下两点考虑： 能够为客户提供更理想的性能 提供更为一致的SEO表现 正是由于SSR拥有上述优势，因此我们在将自有堆栈转换为React与Node.js时，投入了大量时间与精力以优化SSR性能。其中的一项关键性指标正在于页面内“明显位置”的渲染性能。我们
SSR和CSR的区别
窄门狭路的博客
05-28 2258
SSR和CSR的区别 SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。 CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。 简而言之，就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别
客户端渲染（CSR）
csD_Dscnnnnnnn的博客
03-10 1110
客户端渲染（CSR）
SSR 和 CSR
weixin_46087056的博客
04-27 5923
SSR 和 CSR 一、SSR 1.什么是 SSR 传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次 HTTP 请求，加快响应速度。一般用于首屏的优化。 2.SSR 优点 返回的页面全部是 HTML 结构，包含所有需要呈现的数据，利于搜索引擎或者爬虫的数据抓取。 目前使用的 MV*架构，大多都是前后端分离，数据都是动态生成，不利于 SEO 优化。SSR 利于首屏渲染性能高-首屏的加载来自于服务器，不会依赖服务端的接口请求再数据请求。 3.SSR 缺点 性能依
SSR与CSR
adobe2333的博客
08-19 241
客户端渲染（CSR） 客户端渲染简单理解就是浏览器发送页面请求，服务器返回的是一个模板页面，浏览器从上至下解析过程中需要发送ajax请求获取数据，最后再调用模板引擎（art-template等）渲染HTML结构，并把渲染后的结果添加到页面指定容器中。页面由js渲染，js运行于浏览器端，所以称客户端渲染。 基于react的csr渲染流程： 浏览器下载html文档→下载js→运行react代码渲染页面→展示页面 优点： 1.前后端分离的架构，利于开发效率的提升 缺点： 1.首屏渲染时间长 2.不利于搜索引擎优化
SSR及CSR
时光清浅处，一步一安然
04-27 266
SSR及CSR SSR - Serve side render 服务端渲染 CSR - Client side render 客户端端渲染（包含以下两种） ​ 1. BSR - Browser side render 浏览器渲染 ​ 2. APP端渲染 SEO: SEO(Search Engine Optimization)是指搜索引擎优化，通俗说就是总结搜索引擎的检索排名规则，合理的优化网站，使得你的网站在百度或者谷歌这样的搜索引擎中的排名进步，让更多的用户能够访问到你的网站 BSR： 首先www.b
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值