前端页面渲染方式CSR、SSR、SSG

三种渲染方式：

使用预渲染之前，首先要考虑是否真的需要它。

如果初始加载时的额外几百毫秒并不会对应用产生影响，这种情况下去使用预选染将是一个小题大作之举。

首屏加载时间是绝对关键的指标，在这种情况下，如果是静态页面渲染可采用SSG的方式，如果需要页面交互则采取SSR的方式。

静态页面、需要SEO流量的项目、以及用户增长型项目，如：博客、活动页面、app官网等，适用于预渲染的方式。

大部分中后台项目都更加适用于客户端渲染（CSR）方式

CSR（client side render）：客户端渲染，服务端返回一个html文件，先解析构建dom树，浏览器渲染js，动态改变dom树，适用于单页应用

优点：服务器响应快，支持页面交互适用于单页应用；缺点：js渲染之前，页面中没有内容出现白屏现象；页面渲染代码在js中，seo引擎不够友好，爬虫不能解读；

浏览器向前端服务器请求页面；前端服务器返回静态的html页面给浏览器；浏览器向前端服务器请求js脚本；前端服务器返回js脚本给浏览器；浏览器执行js脚本； js脚本向后端服务器请求数据；后端服务器查询数据库数据；数据库返回数据给后端服务器；后端服务器返回数据给js脚本； js脚本渲染页面给浏览器；

SSR（sever side render）：服务端渲染，服务端直接渲染，浏览器直接显示返回的html页面；同时进行脱水操作，将服务器端的请求数据挂载到window上，使浏览器可以获取到后端的数据，无需再次服务端请求；浏览器根据返回的html下载并执行相应的js文件，进行注水操作，浏览器得到数据后，将数据传递给组件，完成事件的绑定和页面的交互，最终得到可交互的页面；

优点：良好的seo；支持页面交互；缺点：需要在服务器端进行渲染和数据获取等处理，服务器响应时间长；服务器端没有window、document等，存在库兼容问题；需要对服务器端进行维护，维护成本高；

浏览器向前端服务器请求页面；前端服务器向后端服务器请求数据；后端服务器查询数据库数据；数据库返回数据到后端服务器；后端服务器返回数据给前端服务器；前端服务器返回完整的html页面给浏览器；浏览器渲染页面；浏览器向前端服务器请求js脚本文件；前端服务器返回js脚本给浏览器；浏览器执行js脚本； js绑定事件进行注水；

SSG（static site generation）：静态页面渲染，构建时生成完整的html，无需服务器请求处理，服务器响应最快，很快就能看到展示的界面

优点：首屏加载速度快；拥有良好的seo; 缺点：适合静态页面，不适合页面交互；构建过程中，没有document,window等，存在库的兼容问题

浏览器向前端服务器请求页面；前端服务器返回静态html页面给浏览器；浏览器构建dom树、render树进行页面渲染；

其他

vue可以在浏览器直接生成dom和操作dom(CSR)

vue也可以渲染为服务器端的字符串，发送给浏览器(SSR)

以上成为vue的“同构”或“通用”；

输入URL到页面渲染完成流程

CSR：预加载（performance）骨架屏+loading，将FP和FCP提前至JS加载，减少白屏问题；

SSR：预加载（performance），将FP、FCP、FMP提前至JS加载，减少白屏和首屏加载的时间；

CSR-浏览器performance情况

SSR-浏览器performance情况

NextJS支持SSR和SSG

前端页面渲染方式CSR、SSR、SSG相关推荐

前端页面渲染的几种方式（CSR/SSG/SSR）
客户端渲染 CSR (Croswer Side Render) 是在单页应用中使用最多的渲染方式,我们现在的项目常用使用了react.vue之类的单页应用的框架,这类框架在进行页面渲染时,会到首先对h ...
2.18 前端页面布局方式的演变
第一阶段现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,但是随着网页的功能越来越复杂,CSS的表现力越来越强,对HTML文档的语义化要求和页 ...
前端页面渲染markDown文件
在我们开发vue组件的过程中,希望把markdown文档写的插件使用说明,也展现到页面中.那么具体怎么做呢? 1.安装vue-markdown-loader npm install vue-markd ...
关于MySQLdb连接数据的使用（插入数据——使用前端页面的方式进行可视化）
1.文件结构: 2.实验效果: 3.关于MySQLdb的下载可以参考以下博主: (1)https://blog.csdn.net/wanglei19891210/article/details/105 ...
看了就会的Next.js SSR SSG实战教程
Next.js是基于React的服务端渲染工具.在传统的React项目中,例如使用Create-React-App创建的项目,最终build生成的静态文件,是基于浏览器渲染的,即所谓的CSR(Clie ...
一文通透从输入URL到页面渲染的全过程----高频面试
一文通透从输入URL到页面渲染的全过程----高频面试喜欢大海喜欢夕阳写下便是永恒文章目录一文通透从输入URL到页面渲染的全过程----高频面试重温进程与线程什么是进程什么是线程进 ...
微信小程序之ajax服务器交互及页面渲染
这篇是特意分开写的.网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx. ...
tp5 分页之无刷新页面渲染
正常情况下,tp5分页渲染出来的页面,切换页码也会切换(刷新)页面,现记录无刷新页面渲染方式: 控制器代码示例: public function aaOp(){$rslist = model('art ...
10. 爬虫训练场，分页爬虫案例前端页面制作
本篇博客重点在分页逻辑与前端页面渲染实现,如果不是顺序阅读过来,可以先查看上一篇博客 <9. 爬虫训练场,分页爬虫案例设计 Demo,打通 Python Flask 和 MySQL> 文章 ...

前端页面渲染方式CSR、SSR、SSG

前端页面渲染方式CSR、SSR、SSG相关推荐

最新文章

热门文章