这是我参与「第五届青训营」笔记创作活动的第9天。

端介绍

CSR|SSR|SSG

客户端渲染（Client-Side Rendering）。常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作

特点：所需资源（HTML、CSS、JS）在一次请求就加载完成，无法动态加载，首屏时间更长

服务器端渲染（Server-Side Rendering）

特点：前后端一体化，一套React代码在服务器运行一遍，到达浏览器再运行一次，前后端均参与渲染，且首次渲染出的HTML一样

静态站点生成（Static-Site Generation），在构建时直接将结果页面输出到磁盘，每次访问直接将html返回给客户端，相当于一个静态资源

CDN：建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络

相比于SSR，因为不需要每次请求都需要服务器端处理，所以可以大幅减轻服务器端的压力

缺陷在于只能用偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面都是相同的

利于SEO

浏览器的推广程度，取决于搜索引擎对站点的检索的排名，搜索引擎可以理解为一种爬虫，它会爬取指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果
更短的首屏时间

SSR/SSG只需要请求一个HTML文件就能展示出页面，虽然再服务器上会调取接口，但服务器之间的通信远比客户端块，甚至是同一台服务器上的本地接口调取，因为无需请求大量JS，所以会有更短的首屏时间

Next.js是一个构建于Node.js之上的开源web开发框架，支持基于React的Web应用程序功能，例如服务器渲染和生成静态网站

上手快，能力集全，而且覆盖了足够多的性能优化和生态

对于新手掌握前后端一体化的开发模式很友好

基于React提供的相关SSG服务器端渲染API实现，整个过程实现比较繁琐，对新手不太友好，所以Next.js应运而生。

getInitialProps

只在服务端运行，只能在页面层面进行绑定，采用同构，使用客户端路由跳转

内部跳转(Link)时会在客户端进行数据请求，直接打开不受影响
getServerSideProps

只会运行在服务端
getStaticProps

涉及动态路由（带参数），需要配置所有可能的参数情况

这次课是受益最多的一节课，因为我们项目选择的就是通过Next.js实现掘金官网，所以这次的课肯定会反复的听，虽然对React不够熟练，但是可以尝试一下去做好这个项目。