前端页面渲染的几种方式（CSR/SSG/SSR）

客户端渲染 CSR (Croswer Side Render)

是在单页应用中使用最多的渲染方式，我们现在的项目常用使用了react、vue之类的单页应用的框架，这类框架在进行页面渲染时，会到首先对html页面进行解析并构建dom树，等js文件返回后、动态的改变 DOM 树的结构，使得页面成为希望成为的样子，从而完成页面的渲染。如下图所示。
这种方式存在着搜索引擎不友好的特点，现在的爬虫主要分为低级爬虫和高级爬虫两种。
低级爬虫：只请求URL，URL返回的HTML是什么内容就爬什么内容。
高级爬虫：请求URL，加载并执行JavaScript脚本渲染页面，爬JavaScript渲染后的内容。
这种方式的优缺点如下表

静态页面生成 SSG (Static Site Generation)：

用于静态页面的渲染方式，构建时生成完整的html页面，无需服务端请求处理，服务器响应快，非常快就可以看到展示的页面。

渲染流程如下图所示：
浏览器端向前端服务请求html资源，前端服务将已经打包好的，具有全部dom的html返回给浏览器端，进行解析、构建dom树等操作。

静态页面预渲染方式的优缺点如下：

服务端渲染 SSR (Server Side Render):

服务端请求需要的数据后，将渲染html页面，返还给客户端，
同时进行脱水操作，将服务端请求的数据挂载window上，使得浏览器可以获取到后端的数据，无须再次服务端请求
浏览器根据返回html，下载并执行相应的js文件，进行注水操作，浏览器得到数据后，将数据传递给组件，完成事件的绑定和页面的交互、最终得到可交互的页面

服务选渲染方式的优缺点如下：

在实现服务端/静态页面渲染时，可以采用实在上主流的一些框架，简化我们的开发流程，比如NextJS，是一个支持ssr，和ssg的react元框架，使用简单，在进行服务端渲染时，每一个组件都有一个getServerSideProps()的方法，只需要将数据获取的处理逻辑写在该方法中，nextjs就会自动调用，从而实现服务端的渲染。NextJS的特点如下图所示

小结

使用预渲染之前，首先要考虑是否真的需要它。
如果初始加载时的额外几百毫秒并不会对应用产生影响，这种情况下去使用预选染将是一个小题大作之举。
首屏加载时间是绝对关键的指标，在这种情况下，如果是静态页面渲染可采用SSG的方式，如果需要页面交互则采取SSR的方式。
静态页面、需要SEO流量的项目、以及用户增长型项目，如：博客、活动页面、app官网等，适用于预渲染的方式。
大部分中后台项目都更加适用于客户端渲染方式。