这是我参与「第五届青训营 」伴学笔记创作活动的第七天。
本课堂重点内容：
- CSR，SSR,SSG
- Next.js介绍
CSR，SSR,SSG
客户端渲染：常见B端WEB应用开发模式，前后端分离，服务器的压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作。
SPA：单页面应用，所需要的的资源（html,css,js）在一次请求中加载完成，不需要刷新地动态加载，首屏时间更长，但是后续用户的体验也会更好。
SSR：从原先的JSP/PHP就已经体现了服务端渲染。在这种模式下，Java，PHP负责渲染的逻辑，而前端只负责UI和交互。
BFF：服务于前端应用的后端。前后端一体化，一套React代码在服务器上运行一遍，到达浏览器又运行一遍，前端后端都要参与渲染，而且首次渲染出的HTML要一样。
SSG：静态站点生成。在构建的时候直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回给客户端，相当于一个静态的资源。
CDN：建立并且覆盖在Internet上，由分步在不同的区域的边缘节点服务器群组成的分布式网络。
SSR,SSG的优势
- 利于SEO，浏览器的推广程度，取决于搜索引擎对站点检索的排名，搜索引擎可以理解是一种爬虫，它会爬取指定的页面的HTML，并且根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果。
- 更短的首屏时间。SSR/SSG只需要请求一个HTML文件就能展现出页面，虽然在服务器上会调取接口，但是服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取。因为不再需要请求大量的JS文件，这就让SSR/SSG可以拥有更短的首屏时间。
Next.js
基于React提供的相关服务器端渲染API实现，整个过程实现比较繁琐重复，从零实现对新上手的不太友好。
Next.js优点： 完善的React项目架构，搭建轻松。比如：Webpack配置，服务器启动，路由配置，缓存能力，这些在它内部已经完善的为我们搭建完成了。
自带数据同步策略，解决服务端渲染最大难点。把服务端渲染好的数据，拿到客户端重用，这个在没有框架的时候，是非常复杂和困难的。有了Next.js，它为我们提供了非常好的解决方法，让我们轻松的就可以实现这些步骤。
丰富的插件帮开发人员增加各种功能。每个项目的需求都是不一样的，包罗万象。无所不有，它为我们提供了插件机制，让我们可以在使用的时候按需使用。你也可以自己写一个插件，让别人来使用。
灵活的配置，让开发变的更简单。它提供很多灵活的配置项，可以根据项目要求的不同快速灵活的进行配置。
目前Next.js是React服务端渲染的最佳解决方案，所以如果你想使用React来开发需要SEO的应用，基本上就要使用Next.js。
