这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
一.CSR、SSR和SSG
CSR
即客户端渲染(Client Side Rendering),现在常用的B端应用web开发模式，前后端分离。渲染在客户端进行，服务器端压力相对来说较小。这样的好处是前端可以使用vue，react等框架进行界面开发，后端只需要关注api，做好返回数据即可。
SSR
即服务端渲染(Server Side Rendering),比较传统的开发方式。在jsp/php时代比较流行。相较于客户端渲染，代码耦合度高，且jsp/php模版语言和前端编程语言混杂，非常难以维护。但是不会给客户端造成太大的压力，不会像客户端渲染一样产生太多卡顿，对用户体验较好。
同构渲染
将服务端渲染和客户端渲染的优点综合起来，前后端都进行渲染。例如在首屏加载时，直接由服务端渲染返回页面，用户就不会在刚进入网页就感觉十分卡顿，而且比纯服务端渲染更利于浏览器SEO。之后的请求都由客户端接管。
SSG
即静态站点生成(Static Site Generation),常用于一些文档站点或静态博客。只能用于静态的网站，无法生成用户相关的内容，每个用户看到的页面都是一样的。常见的SSG工具有hexo、vuepress、vitepress等。
Next.js
NextJs是一个基于NodeJs之上的web开源框架，支持基于React的web程序功能，包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。
初始化
npx create-next-app@latest --typescript
getInitialProps
在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由 意味着如果使用router跳转当前页，会在客户端执行这部分逻辑
getServerSideProps
SSR，与getlnitialProps不同的是即使使用router跳转当前页，也只会在服务端执行这部分逻辑
getStaticProps
SSG，在服务器端构建时执行,如果涉及动态路由（带参数），需要使用getStaticPaths配置所有可能的参数情况
CSS Modules
Next.js支持使用文件命名约定的CSS模块。 [name].module.css
Layout
通过在入口文件导入layout，可以实现每个页面的页眉页尾
文件式路由
Next.js有一个基于页面概念的基于文件系统的路由器。当个文件被添加到pages目录中时，它会自动作为一个路径可用,预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由
BFF层的文件式路由
BFF，作为服务器构建包，不影响客户端构建bundle体积。相同的router生成方式，不过是作为API层访问，而不是page。
