这是我参与「第五届青训营」笔记创作活动的第十八天
什么是 CSR, SSR 和 SSG？常规的 SSR 与 同构 SSR 之间有什么不同？
Web应用从用户的视角来看，可以主要分为B端应用，和C端应用
- B端应用: (例：比如一些烂大街的项目，管理平台啊之类的)To Business，该类应用一般会挂在内网，或提供给内部用户使用
- C端应用: (例：比如稀土掘金就是)To Customer
Next.js是用来开发C端应用，而不是用于开发B端应用的框架
C端应用与B端应用的区别
CSR (Client side redering)
常见的B端WEB应用开发模式，前后端分离，渲染工作在客户端进行
我们从这种应用的响应中可以看出，这个响应是不包含这个页面当中的任何元素，只引入了一些对应的CSS和JS，真正页面模板元素部分当中的核心的也就是<body></body>, 即这个模板页面当中的所有元素是在请求之后，才会去编译塞进来的，通常也是SPA (Single Page Application), 资源不是加载的，资源是一次性拉完的，一般来说，首屏时间也会更长。后端|服务器端是不会去关心我们的模板页面是怎么去渲染的，它们只需要把我们所需要的静态文件返回给我们就好了
SSR (Server Side Rendering)
通常是我们C端的开发模式
传统传统SSR
前后端非分离的，代码耦合度高，页面模板中还参杂着后端语言(比如来进行一些数据的遍历啊、请求, 然后再塞到我们的页面当中等等)，现在除了一些老项目会用，绝大部分项目都不会使用这种开发模式了
同构SSR(对老的SSR和CSR进行改进的)
概念：同构也是SSR，服务器端返回给浏览器的(在开发工具的network中查看)是一个完整的页面 （这点也是区分CSR和SSR最关键的一点) ，现在🔙回到同构SSR的概念，解决了SSR模板中混杂着后端语言，代码耦合度高的痛点。最直接的意思：在一个项目中，Node写的接口服务以及模板页面都在一个项目目录下，但是和传统SSR不同的是，它们不会维护在一个文件内，会被拆分都目录结构下，也被称为前后端一体化，这种模式下，前后端都会参与到渲染的这个过程
前置知识：BFF (Backend For Frontend), 比如说项目很复杂|接口很复杂，我们可能在前后端之间加一层BFF，对下游接口进行裁切和拼接，BFF层通常不会直接操作数据库，可以使前后端各自更专注于自己的业务本身，也降低了协作成本 (下游接口只需关注数据本身，而对这个页面需要内容的处理，可以直接放在BFF中，这样可以提高整一个大型项目的可维护性和可复用性)
SSG(Static Site Generation)静态站点生成
效果上和SSR是一样的，但与SSR不同的是不需要每次请求服务器端(服务器压力小)，而是构建时完成所有路由HTML的构建，分发给CDN，然后由CDN分发静态页面，缺点也很明显，无法根据用户来调整内容，每个用户看到的页面都是相同的，偏向用于做偏展示的C端应用上面
SSR，SSG的优势
- SEO
B端用户通常是必须使用，且使用场景不是从搜索引擎等入口来进入，所以无需太关注SEO，而C端则不同了，需要关注SEO，需要关注如何给项目带来更多的流量，这对C端来说是非常重要的
- 更短的首屏时间(其实是副产品)
首屏时间的提高，对用户体验的提高是是很重要的，也意味着用户留存度的提高
