这是我参与「第五届青训营」伴学笔记创作活动的第 8 天，欢迎各位大佬批评指正。
CSR / SSR / SSG
1. CSR
客户端渲染（Client-Side Rendering），常应用于B端的web开发模式中；具有前后端分离的特点，服务器压力较轻，渲染工作主要在客户端进行，服务器直接返回不加工的HTML，用户再后续访问，请求其中链接资源等。
2. SSR
服务端渲染（Sever-Side Rendering），最早的JSP/PHP就已经有服务端渲染的概念。但是最早的服务端渲染代码耦合度高，而且模版语言中混杂了编程语言，对于一些复杂功能维护起来很困难。
因此有了同构SSR，即前后端一体化，用一套React代码在服务器上运行一遍，到达浏览器又运行一遍。前后端都要参与渲染，而且首次渲染的HTML一样。
3. SSG
静态站点生成（Static Site Generation），在构建的时候直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回给客户端，相当于一个静态资源（有更好的SEO效果）。
SSR和SSG有利于SEO。因为浏览器的推广程度，取决于搜索引擎对站点检索的排名，而搜索引擎根据页面的HTML和用户输入进行排序检索，形成最后的结果。而SSR和SSG只需要请求一个HTML文件就可以展现页面。此外，
SSR和SSG首屏加载时间也更短。
Next.js 究竟是什么
Next.js是一个构建于Node.js之上的开源Web框架，支持基于React的web应用程序功能，例如服务端渲染和生成静态网站。
具有上手快，能力集全，而且覆盖了足够多的性能优化和生态。
Next.js内置两种形式的预渲染：静态生成和服务端渲染。
- 静态生成
静态生成就是项目构建的时候生成页面，并且每次请求页面的时候被重用。
一般是在呈现页面所需的数据在用户请求之前的构建可用时采用。这种数据不是根据用户独有特征生成的，而是可以被公开缓存的，比如：营销页面、博客文章、帮助文档等。
Next.js在构建时使用getStaticProps所返回的包含数据来预渲染页面，如下所示：
export async function getStaticProps(context) {
return {
// 作为参数传递给页面组件
props: {}
}
}
- 服务端渲染
服务端渲染就是在每次页面请求时，重新生成一个页面返回给浏览器。
一般用于页面渲染的数据必须在请求时获取数据时候采用。在请求服务端渲染的页面时，会根据getSeverSideProps返回的数据来构建页面。
export async function getSeverSideProps(context) {
return {
// 作为参数传递给页面组件
props: {
//获取数据逻辑
}
}
}
