客户端渲染与服务端渲染

最新推荐文章于 2024-03-18 15:40:11 发布
最新推荐文章于 2024-03-18 15:40:11 发布
阅读量91 收藏
点赞数
分类专栏： node笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45149859/article/details/107031074
版权

客户端渲染：客户端发送请求，获取到基本的HTML页面，然后通过ajax二次发送HTTP请求获取数据，将数据挂载到页面中

服务端渲染：在服务器上使用模板引擎(例如art-template)，将数据渲染到HTML文档上，当客户端发送请求是，服务器返回给客户端的是已经挂载了数据的HTML文档，因此客户端不再需要通过ajax发送二次请求来获取数据

服务端渲染可以被爬虫抓取到，有利于 SEO 搜索引擎优化；客户端异步渲染很难被爬虫抓取

客户端渲染可以减轻服务器压力；服务端渲染由于需要对模板进行渲染，会导致服务端压力增大

一般的网站都是 客户端渲染+服务端渲染 相结合来进行开发的

bulibuluo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
服务端渲染和客户端渲染的区别
weixin_49983224的博客
04-20 1654
1.什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容渲染，而不是在客户端完成页面内容的渲染。 SSR并不是前端特有的技术，我们学习过的JSP技术和Thymeleaf技术就是典型的SSR 服务端渲染的特点： 在服务端生成html网页的dom元素 客户端（浏览器）只负责显示dom元素内容 2.什么是客户端渲染 客户端（浏览器） 使用AJAX向服务端发起http请 求，获取到了想要的数据，开始渲染html网页，生.
vue服务端渲染的实例代码
12-12
一、什么是服务端渲染 客户端请求服务器，服务器根据请求地址...这是vue官网的服务端渲染的示意图，ssr有两个入口文件，分别是客户端的入后文件和服务端的入口文件，webpack通过两个入口文件分别打包成给服务端用的
简谈服务端渲染和客户端渲染。
qq_35708775的博客
02-18 249
本质和不同 服务端渲染和客户端渲染本质都是字符串拼接； 服务端渲染：在客户端发起请求后，在服务端把数据查询的结果嵌套在html，然后把整个包发给客户端进行渲染，这当中只会有一次请求。 客户端渲染：在客户端发起请求后，服务端将html页面返回，html中还有js执行文件和css样式文件，在页面返回完成时，再执行js执行文件，从服务端获取数据资源，渲染到html页面上，这当中，至少会有两个请求。...
python 服务端渲染_客户端渲染与服务端渲染
weixin_39594080的博客
12-07 187
后端渲染服务器直接生成HTML文档并返回给浏览器，但页面交互能力有限。适用于任何后端语言：PHP、Java、Python、GO等。客户端渲染(CSR)页面初始加载的HTML文档中无内容，需要下载执行JS文件，由浏览器动态生成页面，并通过JS进行页面交互事件与状态管理。同构应用(SSR)isomorphic/universal，基于react、vue框架，客户端渲染和服务器端渲染的结合，在服务器端执...
客户端渲染和服务端渲染的区别
rqq123的博客
11-23 115
客户端渲染和服务端渲染的区别 客户端渲染（BSR） 前端利用ajax等数据交互手段获取服务端提供的数据之后，渲染到HTML页面。 方法：（ajax、jsonp、fetch）=> 获取数据 => 文档碎片插入，拼接字符串，模板引擎。 客户端运行了页面之后才进行 优点：灵活，真正的前后端分离，方便于前后台各自更新维护 缺点： 对SEO不友好，增加了http请求次数，减缓了页面加载速度 2、...
客户端渲染和服务端渲染
drawlessonsfrom的博客
11-14 1278
客户端渲染 当此渲染为客户端渲染时，在客户端所进行的操作步骤如下所示： 收到服务端响应的字符串。 从上到下依次进行相关的解析，在解析的过程中，如果发现ajax请求，则再次发起新的请求。 拿到ajax响应的结果。 使用模板引擎进行渲染。 在客户端渲染中，其至少会发起两次请求。 第一次请求拿到相关的页面。 第二次请求拿到相关的动态数据。 优点： 页面显示速度比较快。 缺点： 内容的显示速度偏慢。 服务端渲染 在服务端读取相关所需渲染的页面文件，然后使用模板引擎渲染，在发送给客户端之前，服务端就已经将相关
客户端渲染与服务端渲染（1）
2401_83127745的博客
03-18 478
因为时间在往返的几次网络请求中就耽搁了，而且因为 CSR 返回到页面的 HTML 中没有内容，就只有一个 root 空元素，页面内容是靠 js 渲染出来的，爬虫在读取网页时就抓不到信息，所以 SEO 不友好。客户端渲染即普通的 React 项目渲染方式。React 代码在服务器端执行，很大的消耗了服务器的性能。浏览器执行 bundle.js 中的 React 代码。浏览器发送 bundle.js 请求。服务器返回 bundle.js。服务器返回 HTML。
客户端渲染与服务端渲染（2）
2401_83127745的博客
03-18 440
因为时间在往返的几次网络请求中就耽搁了，而且因为 CSR 返回到页面的 HTML 中没有内容，就只有一个 root 空元素，页面内容是靠 js 渲染出来的，爬虫在读取网页时就抓不到信息，所以 SEO 不友好。客户端渲染即普通的 React 项目渲染方式。React 代码在服务器端执行，很大的消耗了服务器的性能。浏览器执行 bundle.js 中的 React 代码。浏览器发送 bundle.js 请求。服务器返回 bundle.js。服务器返回 HTML。
同构渲染（客户端渲染 + 服务端渲染）
qq_24719349的博客
12-03 988
> 什么是同构渲染 1.基于React、Vue等框架，客户端渲染和服务器端渲染的结合 .在服务端执行一次，用于实现服务器渲染（首屏直出） .在客户端执行一次，用于接管页面交互 2.核心解决了SEO和首屏渲染慢的问题 3.拥有传统服务端渲染的优点，也有客户端渲染的优点 同构渲染的流程 1.客户端请求一个地址走到服务端； 2.服务端通过接口服务查询页面所需数据，并返回到服务端； 3.服务端渲染页面以及生成客户端SPA脚本； 4.返回渲染好的页面内容和客户端的SPA脚本给客户端，也就是html； 5.
服务端渲染与客户端渲染详解（vue）
m0_52669454的博客
07-14 2622
服务端渲染与客户端渲染详解（vue）
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
12-10
Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候，一直苦于产品、...
React服务端渲染（总结）
11-30
那客户端渲染和服务端渲染有什么差别？服务端渲染究竟快在哪里呢？ 二、原因与思路 客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> ...
Angular开发实践之服务端渲染
01-19
Angular在服务端渲染方面提供一套前后端同构解决方案，它就是Angular Universal（统一平台），一项在服务端运行 Angular 应用的技术。 标准的 Angular 应用会执行在浏览器中，它会在 DOM 中渲染页面，以响应用户的...
详解使用Next.js构建服务端渲染应用
10-18
主要介绍了详解使用Next.js构建服务端渲染应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
keil5安装程序（包含keygen）
05-21
keil5安装程序（包含keygen）适用于单片机学习
grpcio-1.14.1-cp37-cp37m-manylinux1_i686.whl
最新发布
05-21
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
grpcio-1.14.0-cp36-cp36m-linux_armv7l.whl
05-21
Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
CoreNLP一套Java核心自然语言处理工具，用于标记化、句子分词、NER分析、相互引用、情感分析等.zip
05-21
CoreNLP一套Java核心自然语言处理工具，用于标记化、句子分词、NER分析、相互引用、情感分析等
vue在客户端渲染是什么意思
05-12
Vue.js 支持两种不同的渲染模式：客户端渲染和服务端渲染。 在客户端渲染模式下，Vue.js 应用程序在浏览器中运行，所有的渲染工作都由客户端的 JavaScript 引擎完成。当用户请求页面时，服务器会将静态的 HTML、CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值