这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
CSR, SSR, SSG
1、Web应用分类（用户视角）
- B端应用
- C端应用
2、CSR
客户端渲染 Client-Side Rendering
- 常见的B端web应用开发模式，前后端分离，服务器压力相对较轻，渲染工作是交给前端即客户端来进行，服务器只负责数据的保存和发送。
- B端应用和服务器响应的html里面并不会包含页面当中的任何元素
- CSR对于服务器端（后端）来说，它们不会关心模板页面怎么渲染，我们给它什么，它就给我们什么。
3、SPA
SPA（single page web application）: 单页面Web应用，它所需的资源（html\css\js等），在一次请求就会全部加载完成，不需要动态加载，但首屏时间相对更长。
4、首屏时间
页面从输入这个链接到打开页面的过程，能看到元素的时间。
5、SSR
服务器渲染（Server-Slide Rendering）
- 这里介绍同构SSR（将老SSR和CSR进行改进后）现在的模式
- 前后端一体化，一套代码在服务器运行一遍，返回用户浏览器一个html文档又会运行一遍，前端、后端都要参与渲染，而且首次渲染出的html要一样。
- SSR与CSR相对应，SSR是C端开发模式
- 服务器端返回给前端的network里面，它会是一个完整的页面
- 在一个项目中node写的接口服务以及当时的模板页面都在一个项目结构目录下，但是不会维护在一个文件内。维护是在一个项目下，但会拆分到不同的目录结构下。也叫前后端一体化。
- 一套react代码，在服务器执行一遍，然后到浏览器端再执行一遍。前端后端都会参与渲染过程当中，并且首次渲染的html是要一样的。
6、C端应用与B端应用最大的不同
这也是区分CSR还是SSR模式最关键的地方：
即Network不同：
- SSR：Response页面中存在的元素会在服务器端第一次请求的时候带过来
- CSR本来有的元素，第一次请求的时候，并不会直接体现在 html中
7、BFF
（1） BFF概念
BFF是一个node服务，可以操作数据库，但通常来说不会直接操作数据库，而是直接对下游的几个请求的数据进行拼接汇总，然后交给前端进行模板页面的数据展示或交互。相当于作为前端和后端的中介。
（2） BFF存在原因
后端服务可能很多，加入中介层接口只需要在乎数据本身，而对于页面中需要的内容的处理可以直接放到BFF中。提高大型项和可维护性和可复用性。
8、SSG
静态站点生成（Static Site Generation），在构建时直接把页面结构输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源。
缺陷在于只能生成偏静态的页面，无法生成与用户相关的内容，也就是所有用户访问界面相同的。 因此SSG一般使用在页面偏固定，内容量不多的情况下
9、SSG和SSR区别
- SSR每访问一个路由，都会向服务器端请求并返回一个response，服务器端的压力大
- SSG并不会在每一次请求的时候都向服务器端请求，而是在一开始构建的时候把所有的结果从html上传到CDN上，然后我们再去访问这个路由。与访问一个纯静态的html效果是一样的。
10、SSG和SSR的优势
（1）利于SEO搜索引擎优化
SSR是服务器端会参与到渲染的过程当中，返回的内容就存在页面的元素，因此用户可以在html中得到关键词，从而提高整个站点在搜索引擎当中的排名。C端应用最关注的部分，C端页面对SEO要求很高。
（2）更短的首屏时间
CSR需要把所有的内容请求下来，SSR、SSG只需要请求一个HTML文件就能把页面展现出来。
服务器端的通信比客户端快，不像CSR需要请求大量JS文件，因此SSR、SSG在服务器端调取接口，通常可以获得更短的首屏时间。通常可以做到秒打开。
11、CDN：建立并覆盖在Internet上，由分布在不同区域的边缘节点服务器组成的分布式网络。
相比SSR，因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力。
