这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
详细知识点介绍：
课程目标
所有应用分为B端用户、C端用户两种
例如 用于内网 内部用户使用 B端
CSR，SSR，SSG ——用于B端应用的三种渲染框架
CSR
服务端渲染，B端WEB应用开发模式，前后端分离。服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作
SPA：单页面应用，它所需要的资源（HTML CSS JS等），在一次请求中就加载完成，不需刷新地动态加载，首屏时间更长
SSR
第一次将图片等信息都返回了
代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很痛苦
这种模板下Java、PHP负责渲染的逻辑，而前端只负责UI和交互
同构SSR
前后端一体化，一套React代码在服务器运行一遍，到达浏览器又运行一遍，前端后端都要参与渲染，而且首次渲染出的HTML要一样
BFF：Backened For Frontend，服务于其阿奴单应用的后端
SSG
简单来说，相对SSR，所需要的机子少
静态站点生成（Static Site Generation），在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源
SSR，SSG的优势
- 利于SEO
- 更短的首屏时间
什么是Next.js
- SSR的实现 基于React提供的相关服务器渲染API实现，整个过程实现比较哦繁琐重复，从零实现对新上手的同学很不友好
脱水 与 注水
Next.js
使用Next.js可以不需要太关注多余的部分
初始化
npx create-next-app@latest --typescript
(代码)Next.js客户端开发
CMS仓库地址[github.com/czm12904337…] Demo仓库地址[github.com/czm12904337…]
Nextjs初始化
将API分开
getInitialProps
getServerSideProps
getStaticProps
CSS Modules
Next.js支持使用文件命名约定的CSS模块。[name].module.css
Layout
通过在入口文件导入layout，可以实现每个页面公共的页眉页尾
文件式路由
Next.js有一个机遇页面概念的机遇文件系统的路由器。当一个文件被添加到pages目录中时，它会自动作为一个路径可用
BFF层的文件式路由
路由跳转
走路由跳转比较好
除了这些外，还可以使用原生方法跳转，不过原生的方法不会进行Diff比对渲染，性能上Nextjs提供的路由跳转会更好
header的修改
可用于修改TDK(title, description, keywords)
多媒体适配 —— CSS适配
适配：PC、手机、ipad
rem 灵活换算
多媒体适配 —— JS适配
大图优化 ——webp
(代码)服务端开发
BFF层开发
和Express等开发类似，区别是并没有参数可以直接区别请求类型
调试方法
两种开发模式：1. debug 2. 终端
浏览器控制台上的绿色标识：原本的是 客户端的控制台，点击后出现的是服务器控制台
Strapi - headless CMS
数据管理平台 strapi
仓库：[github.com/strapi/stra…] 初始化：[npx create-strapi-app my-project --quickstart]
一个接口的生成有以下几个过程：
- content-type builder 编辑结构体
- content manager 配置数据源，并且发布
- settings roles里选择对应角色并勾选要发布的接口类型
- 如果涉及嵌套，在接口后加上populate=deep参数 (npm install strapi-plugin-populate-deep--save), 没安装加参数populate=*，但只能嵌套一层
核心功能讲解
首页功能实现
- 页面 & 动画 & 多媒体适配
- BFF
- Strapi
文章页实现
主题化功能实现
- 基础样式和背景的抽离
- 主题化context全局注入
- 从注入数据中取出theme和setTheme
- 多进程间的主题同步
思考题：http://localhost:3000 ,和 http://127.0.0.1:3000 主题可以共享吗
答：不可以。最底层是Local storage控制的，而localhost与127.0.0.1属于不同级，所以主题不能共享
