前端页面渲染方式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