这是我参与「第五届青训营」伴学笔记创作活动的第 8 天
一、本堂课重点内容：
- CSR、SSR、SSG简介
- Next.js简介
- Next.js客户端开发
- Next.js服务端开发
- demo核心功能讲解
二、详细知识点介绍：
CSR、SSR、SSG简介
CSR
- 客户端渲染，常见B端web应用开发模式
- 前后端分离，服务器压力相对较强，渲染在客户端进行，服务器直接返回不加工的HTML
- 一次性加载所有资源，首屏时间长，无需动态刷新元素资源
- response中不含页面元素内容（伏笔）
SSR
- 服务器端渲染，C端web应用开发模式
- 服务器返回需要加载的元素（已渲染），代码耦合度较高，模板语言可能混杂编程语言，维护较难。
- 其中编程语言负责渲染逻辑，前端只负责UI和交互
同构SSR
- BFF，服务于前端应用的后端。前后端一体化。
- React代码在服务器中运行一遍生成HTML发给浏览器，浏览器加载 JS文件，绑定DOM事件，客户端渲染接管。
- 提高项目的可复用性和可维护性
- 前后端都需要渲染以保证相同效果
SSG
- 静态站点生成。构建式直接生成HTML到磁盘，每次访问直接返回HTML，相当于静态资源。
- 需要CDN（一种分布式网络），相比于SSR，无需每次请求都由服务器端处理，减轻了服务器端压力
- 缺点：只能用于偏静态的页面，所有用户访问的页面都是一样的。
SSR、SSG：
- 利于SEO
- B端的返回并不体现元素内容，而这会降低搜索引擎对站点的排名（回收伏笔）。搜索引擎相当于是一种爬虫，爬取内容并排名相关性，而C端应用的返回是带有内容的，更容易搜到。
- 更短的首屏时间
- 只需请求一个HTML文件就能展现页面，服务器端间通信远比客户端快，无需客户端请求大量JS文件
Next.js简介
用于开发C端应用
SSR的实现
同构：客户端和服务端都要做同一件事，保证双方预期相同。
基于React提供的相关服务器端渲染API实现较为繁杂，不易上手，需要一个封装好的集合快速上手服务器端渲染。
为什么同构：
没同构的时候，事件无法触发，因为相当于没有返回对应的JS文件，事件调用为空
注水、脱水：其实就是同构的重要步骤，将页面变为模板，然后再客户端中注入JS脚本，无需请求
以上等等都需要大量重复繁琐的工作，而占用大量开发时间，对新手入门很不友好
综上，Next.js应运而生，Next.js有大量封装集成
Next.js客户端开发
主要是三种数据注入API：
- getInitialProps：老的API，SSR，页面打开时在服务器端运行，路由跳转时在客户端运行数据注入，需要兜底，不友好
- getServerSideProps：新API，SSR，由老API拆分的接口，只在服务器端走
- getStaticProps：SSG，将所有情况存在CDN里，看到的就是固定页面的内容
- 还有一种是客户端注入：useEffect，结合钩子函数，一般不这样用
CSS Modules：
类名后加入哈希值，避免样式重复互串
Layout：
一个组件，包括页眉和页尾
文件式路由：
router，以访问路由、跳转路由的形式访问资源；如BFF层的文件式路由，当数据的搬运工，不生产/处理 数据。
多媒体适配：
- CSS适配：用rem单位，可以灵活换算
- JS适配：不同的组件，不同的交互，需要使用不同的注入器
- 大图优化：转成webp，提高网络较差时的加载效果，但对于网速较快的情况有反效果
Next.js服务端开发
BFF层开发：
不区分get/post，没有中间件写法
CMS：后台管理平台
数据内容变更无需研发人员帮助，运营可直接在CMS中调整文案等，提高工作效率，减轻研发人员工作量
strapi：
一个便捷开发CMS的库，可以很方便生成所需接口
- content-type builder：编辑结构体
- content manager：配置数据源，并发布
- settings roles：选择对应角色并勾选要发布的接口类型
如果涉及嵌套（如layout中的子结构体），在接口后加入populate = deep参数，
npm install strapi-plugin-populate-deep --save
Demo核心功能简介
首页功能
- 页面 动画 多媒体适配
- BFF
- strapi（CMS）
文章页实现
- strapi分页
- 多媒体格式转换：
-
- markdown转html
-
- html转dom
- 公共样式
主题化实现
- 基础样式和背景的抽离
- 主体化context全局注入
- 从注入数据中取出theme和setTheme
- 多进程间的主题同步
next.js小结
用于c端应用开发(很高的SEO要求)
重点在于数据注入，数据同步
next.js比react来说是集大成的开发工具，开发SSR更方便，减少重复的工作
是数据的搬运工，不生产数据，strapi（CMS）负责生产数据
三、课后个人总结：
今天的课程主要围绕Next.js的相关知识点进行了讲解，介绍了让Next.js诞生的需求，介绍了C端web应用的特点，还通过demo代码对几个重点如数据注入、SSR实现，CMS等进行了详细的剖析。由于不是从零开始搭建项目的实战，所以今天以记录知识点帮助理解知识点为主，课后需要自己读demo源码，才能更好的消化今天的内容。
笔记如有错误，欢迎指出，谢谢。
