这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
之前在实习时写过一段时间的nextjs项目，但也仅仅是停留在一些很简单的部分，比如文件路由、动态路由等。在青训营中，我有了重新学习nextjs的机会，甚至是由大佬带着学习的。在此做一些笔记。
CSR, SSR, SSG
CSR
CSR指的是客户端渲染，常用于B(business，面向企业用户，如内部应用)。服务器压力比较小，在客户端进行渲染。处理带有较多用户交互数据时比较适合，动态加载，首屏时间会很长。
SSR
服务端渲染，之前出现的php等就属于服务端渲染。而由于在模版中夹杂了很多的服务端语言，代码耦合度很高，不利于长期维护。
现在出现了新的SSR，同构SSR。前后端一体化，模版与逻辑在同一项目内但维护在不同目录下，方便维护。一套react代码在浏览器和服务器都跑一遍，首次渲染的html保持一致。
BFF，服务于前端的后端，分开前后端，处理部分数据，提高后端服务可复用性。
SSG
静态站点生成，就是在构建时直接把html界面输出到磁盘，收到访问请求时将它传给用户。（类似早期访问静态页面）依赖于CDN服务，提高访问速度。只能传递静态页面，没什么交互。
Next.js
课上利用React提供的服务端渲染的api简单实现了一下同构ssr，明显看出整个过程是复杂且重复的，对新人很不友好。而nextjs的出现便解决了这个重复且复杂的问题，它集成并优化了这一过程，让人更轻松地掌握前后端一体化。
Next.js客户端开发
数据注入的几种方式，
getInitialProps
比较复杂的一个函数，首次渲染进行服务器端渲染，路由转跳使用客户端路由。用的地方不多，一般使用后面两种函数实现大部分功能。
getServerSideProps
函数内逻辑始终在服务端执行，通常用的地方很多。
getStaticProps
用于SSG，也是在服务端运行。
其他实用的地方
- CSS Modules 支持使用文件名约定的CSS模块。[name].module.css
- Layout 入口文件导入layout来实现不同页面公共的页眉页脚。
- 文件式路由 nextjs有着基于文件系统的路由，在pages目录下的文件会自动成为一个路径。
- BFF层文件路由 api访问时的路由类似pages，也是基于文件系统的
- 路由转跳 next提供的Link转跳性能会更优
- header修改 可用于修改 title, description, keywords
- 多媒体适配、js适配、大图webp适配等先进技术
CMS系统
个人理解为一个面向非开发人员的数据库管理系统，能够提供非常直观简化的操作界面，并提供了自动生成路由等方便开发配置的功能。当然这里只是介绍了一个相当不错的一个项目，strapi。在大项目中应该会很方便配置使用。
