【前端相关】服务端渲染和客户端渲染的比较

简介: 用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html 的内容,这个过程就是服务端渲染。当初随着web2.0的到来,AJAX技术兴起,出现了客户端渲染:客户端(浏览器) 使用AJAX向服务端发起http请求,获取到了想要的数据,客户端拿着数据开始渲染html网页,生成Dom元素,并最终将网页内容展示给用户。

要想对比服务端渲染和客户端渲染首先要知道它们的概念?

一、什么是服务端渲染?

我们用传统的servlet开发来举例:浏览器请求servlet,servlet在服务端生成html响应给浏览器,浏览器展示html 的内容,这个过程就是服务端渲染,如下图:


1.png


服务端渲染的特点:

1)在服务端生成html网页的dom元素。

2)客户端(浏览器)只负责显示dom元素内容。

二、什么是客户端渲染?

当初随着web2.0的到来,AJAX技术兴起,出现了客户端渲染:客户端(浏览器) 使用AJAX向服务端发起http请求,获取到了想要的数据,客户端拿着数据开始渲染html网页,生成Dom元素,并最终将网页内容展示给用户,如下图:


2.png


客户端渲染的特点:

1)在服务端只是给客户端响应的了数据,而不是html网页

2)客户端(浏览器)负责获取服务端的数据生成Dom元素。

三、两种方式各有什么优缺点?

3.1 客户端渲染

3.1.1 优点

客户端负责渲染,用户体验性好,服务端只提供数据不用关心用户界面的内容,有利于提高服务端的开发效率。

3.1.2 缺点

不利于网站进行SEO,因为网站大量使用javascript技术,不利于spider抓取网页。


3.1.3 适用场景

对SEO没有要求的系统,比如后台管理类的系统,如电商后台管理,用户管理等。

3.2 服务端渲染

3.2.1 优点

有利于SEO,网站通过href的url将spider直接引到服务端,服务端提供优质的网页内容给spider。

3.2.2 缺点

服务端完成一部分客户端的工作,通常完成一个需求需要修改客户端和服务端的代码,开发效率低,不利于系统的稳定性。

3.2.3 适用场景

对SEO有要求的系统,比如:门户首页、商品详情页面等。



`本文首发于CSDN,为博主原创文章,如果需要转载,请注明出处,谢谢!`




完结!

相关文章
|
2月前
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
180 2
|
2月前
|
SQL 前端开发 程序员
【面试题】前端开发中如何高效渲染大数据量?
【面试题】前端开发中如何高效渲染大数据量?
|
21天前
|
缓存 前端开发 JavaScript
前端性能优化:从加载到渲染的全方位探索
【6月更文挑战第11天】本文探讨了前端性能优化,重点关注加载速度和渲染效率。压缩与优化资源文件、利用CDN、异步加载和懒加载可提升加载速度。减少DOM操作、合理利用CSS和JavaScript、优化JavaScript执行效率以及利用浏览器缓存能提高渲染效率。通过综合运用这些策略,可提升用户体验。
|
2月前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
48 3
|
2月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
2月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化:从加载到渲染的全流程分析
前端性能优化是Web开发中的关键一环。本文将从加载资源、解析HTML、执行JavaScript、样式计算、布局和渲染等多个方面深入探讨前端性能优化的全流程,为开发者提供全面的技术指南和实用建议。
|
2月前
|
前端开发 JavaScript C++
【掰开揉碎】Django模板 vs 前端框架:选择合适的渲染方式
【掰开揉碎】Django模板 vs 前端框架:选择合适的渲染方式
|
2月前
|
消息中间件 JavaScript 前端开发
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
|
2月前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
316 0
|
2月前
|
消息中间件 前端开发 Java
【面试题】前端必修-浏览器的渲染原理
【面试题】前端必修-浏览器的渲染原理