参考链接:客户端渲染和服务端渲染的区别https://blog.csdn.net/qq_40885461/article/details/88539989

浅谈服务端渲染(SSR)https://www.jianshu.com/p/10b6074d772c

客户端渲染

在服务端Server放了一个HTML页面,客户端发送请求,服务端将页面给客户端,客户端在收到服务端响应的字符串后,然后浏览器从上到下依次解析,在解析过程中,如果发现ajax请求,则再次发起新的请求,拿到ajax响应结果后再模板引擎渲染。所以客户端渲染至少发送了两次请求。其中,第一次请求拿到的是页面,第二次请求拿到的是动态数据。总的来说,客户端渲染页面加载速度快,但是数据加载缓慢。

利:

  • 前后端分离,前端专注于UI,后端专注于逻辑;
  • 局部刷新,无需每次请求完整页面,体验更好;
  • 节省服务器性能,部署简单;
  • 交互性好,可以实现各种效果。

弊:

  • SEO问题,爬虫看不到完整的呈现源码;
  • 首屏渲染慢,渲染前,需要下载一堆js和css文件;
  • 耗电

服务端渲染(SSR:server side render)

在服务端使用模板引擎,模板引擎最早诞生于服务端,后来才发展到了前端。浏览器向服务端发起一个页面请求,实际上服务端响应浏览器的请求前已经将页面和数据渲染完成。因此,服务端渲染,响应的就是最终的结果,在客户端不需要再做任何处理。一次请求就可以完成渲染,因此服务端渲染比客户端渲染更快。

举个商品列表页面为例子:

前端渲染:说的应该是刚进入页面时,商品列表这些数据都不给你,不会渲染出这些数据。然后加载script时,再用ajax或者fetch之类的发起了请求另一个接口,服务端返回了商品列表的json数据给你,你在js中用模板引擎之类的技术,把这些数据拼成html字符串插入到Dom里。

服务端渲染:服务端用php的smarty模板或者java的jsp,把页面的商品列表信息渲染出来了,返回一个html给浏览器了。

利:

  • 首屏渲染快,客户端只负责解析html;
  • 利于SEO;
  • 可以生成缓存片段,生成静态化文件;
  • 节能

弊:

  • 用户体验较差;
  • 不容易维护,通常修改了部分html或者css,后端也需要改

客户端渲染和服务端渲染相关推荐

  1. 预渲染与服务端渲染的区别

    预渲染与服务端渲染的共同点: 都是多页面, 根据客户端的url 返回响应的文件. 不同点: 预渲染html文件的生成 在客户端 , 服务端则反之. 预渲染的缺点: 在这里我举一个例子更好的理解预渲染道 ...

  2. React 服务端渲染 umi服务端渲染

    react 服务端渲染原理不复杂,其中最核心的内容就是同构. node server 接收客户端请求,得到当前的req url path,然后在已有的路由表内查找到对应的组件,拿到需要请求的数据,将数 ...

  3. java vue 服务端渲染_vue服务端渲染缓存应用详解

    服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲 ...

  4. python 服务端渲染_客户端渲染与服务端渲染

    后端渲染 服务器直接生成HTML文档并返回给浏览器,但页面交互能力有限.适用于任何后端语言:PHP.Java.Python.GO等. 客户端渲染(CSR) 页面初始加载的HTML文档中无内容,需要下载 ...

  5. vue服务端渲染 MySQL_Vue 服务端渲染(SSR)

    什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...

  6. vue服务端渲染 MySQL_Vue 服务端渲染

    关于 vue 做服务端渲染,目前主要有俩种解决方案,使用 vue-server-renderer 或者使用 nuxt .但个人感觉使用 nuxt 写法太死,以及即使你用 nuxt 写出了 vue ss ...

  7. vue服务端渲染 MySQL_vue服务端渲染

    一.基本原理 1.服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: a.服务器通过模板引擎 ...

  8. vue服务端渲染 MySQL_vue服务端渲染简单入门实例

    想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...

  9. python 服务端渲染_客户端渲染和服务器渲染的区别

    我们都知道,网页上的很多内容之所以能那么丰富,是因为大量的css.js去渲染出这个页面.那么他们是如何渲染的呢?那么就要说到我们本文的两种渲染方式了,即客户端渲染和服务端渲染. 正文 本文将分别讲述两 ...

最新文章

  1. 为什么要选择html5,5分钟告诉你,为什么要学HTML5大前端
  2. 数据库原理实验二 数据库管理 实验报告
  3. microsoft mysql下载_Microsoft SQL Server 2018
  4. LightOJ 1084 Winter(记忆化搜索)
  5. 支持向量机SVM原理(一)
  6. 二叉树后序遍历_LeetCode算法145. 二叉树的后序遍历
  7. 有哪些适合新手练手的C/C++项目?
  8. centos怎么编写java_编写的java程序在centos后台运行的方法
  9. RuntimeError: The Session graph is empty. Add operations to the graph before calling run().
  10. CSS标准颜色参考表
  11. k3 lede刷官改_斐讯K3路由LEDE固件刷回官方原版固件
  12. STLink连接与资源下载
  13. 计算机ps基础考试题,2014计算机一级考试PS及基础模拟试题
  14. Java常用关键字查询
  15. java 生成 rtf,JAVA实现BI报表中RTF模版转PDF
  16. 读《大秦帝国》第三部
  17. GPS的Heading, Course, and Crab Angle不同与区别
  18. 异常解决——Tomcat启动异常:Cannot assign requested address
  19. PyTorch_Geometric 安装过程
  20. angr学习之ctf练习

热门文章

  1. 微信公众号url认证(服务器认证)
  2. String转Date格式显示年月日或其他自定义格式
  3. KSZ8863调试,MCU平台移植
  4. 范数对于数学的意义?1范数、2范数、无穷范数
  5. 石头科技打造硬核品牌力 持续出海拓展全球市场
  6. 电磁继电器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  7. C - N^3问题 SDUT
  8. 如何增加mysql主键约束_mysql修改表时怎么添加主键约束?
  9. 上传自己库到Cocoapods和遇见的各种问题解决
  10. 深度强化学习制作森林冰火人游戏AI(五)识别游戏状态