这是我参与【第五届青训营】笔记创作的第八天。
主要记录CSR, SSR, SSG的相关知识；Next.js的概念、客户端开发、服务端开发等内容。
C端Web应用开发。 B端：面向内部，C端：面向整个互联网。
CSR, SSR, SSG
CSR：客户端渲染，常见B端Web应用开发模式。前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTNL用户在后续访问操作。
Response里面不会包含任何元素内容。
SPA：单页面应用，它所需的资源在一次请求中就加载完成，不需刷新的动态加载，首屏时间更长。 多用于管理平台
首屏时间：输入链接到打开过程看见元素的时间。
SSR：与CSR对应，服务器端渲染，C端Web应用开发模式。代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很痛苦。在大多情况下，SSR使用较少。
这种模式下，Java,PHP负责渲染的逻辑，而前端只负责UI和交互。
同构SSR：
BBF：服务于前端应用的后端。
前后端一体化，一套React代码在服务器上运行一遍，到达浏览器又运行一遍。前端后端都要参与渲染，而且首次渲染出来的HTML都一样。
SSG：静态站点生成。与SSR在效果上一样。但不会在每次请求的时候都向服务器请求，可以大幅度减轻服务器的压力。
在构建的时候直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回到客户端，相当于一个静态资源。
缺陷：所有用户访问的页面内容都一样。无法返回与用户相关内容。
SSR、SSG的优势
利于SEO：浏览器的推广程度，取决于引擎对站点检索的排名。搜索引擎可理解为爬虫，爬取指定页面的HTML，根据关键词对其进行排名。CSR无法抓取HTML内容。
更短的首屏时间：因为不需要请求大量js文件。
Next.js
更好更快开发一个SSR/SSG的项目。
同构：客户端和服务端都会参与其中。客户端做过的事情，服务端也会做一次。
Next.js客户端开发
Next.js初始化
数据注入（最重要）：getServerSideProps、getStaticProps、getInitialProps、客户端注入
getInitialProps：在服务器端执行，如果使用router跳转当前页面，会在客户端执行这部分的逻辑。
getServerSideProps：SSR，只会在服务器端执行，即便使用router跳转当前页面。
getStaticProps：SSG，
