这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

什么是CSR？

CSR全称是 Client Side Rendering，需要使用 JavaScript，调用接口（API）来获取数据，这种方式前后端完全分离。如今我们大部分 WEB 应用都是使用 JavaScript 框架进行页面渲染的，页面中的大部分DOM元素都是通过Javascript插入的。在执行 JavaScript 脚本之前，HTML 页面已经开始解析并且构建 DOM 树了，渲染工作在客户端进行，服务器直接返回不加工的HTML，JavaScript 脚本只是动态的改变 DOM 树的结构，使得页面成为预期的样子，这种渲染方式叫动态渲染，也就是客户端渲染。

什么是SSR？

SSR全称是 Server Side Rendering，与客户端渲染不同的是，SSR输出的是一个渲染完成的HTML，整个渲染过程是在服务器端进行的。在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的下载过程，即可直接构建出我们所希望的 DOM 树并展示到页面中。SSR首屏渲染比CSR要快很多，且利于SEO。

什么是SSG？

SSG全称是 Static Site Generation ，使用了 SSG技术搭建出的网站，每个页面对应的 HTML 文档在项目 build 打包构建时就已经生成好了，用户请求的时候服务端不需要再发送其它请求和进行二次组装，直接将该 HTML 文档响应给客户端即可，客户端与服务端之间的通信也就变得更加简单，而且客户端依旧不需要下载 Javascript文件就能渲染出整个页面。服务器端压力减小，有利于SEO。但是由于页面是提前就生成好的，所以每个用户看见的都是同一个页面。