这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
Next.js 实战项目
CSR
客户端渲染。常见B端Web开发模式，前后端分离，服务器压力相对更轻
不关心模板页面是怎么渲染的
SSR
服务端渲染，Java, PHP负责渲染的逻辑，前端只负责UI和交互
同构SSR
前后端都参与渲染，且首次渲染出的HTML要一样。
BFF：Backend For Frontend，服务于前端应用的后端。将后端内容进行拼接，再交给前端。
SSG
静态站点生成（Static Site Generation）构建时直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于静态资源
服务器压力更小，每个用户得到的html相同，适合静态展示页面
SSR，SSG的优势
利于SEO
搜索引擎排名
更短的首屏时间
服务器之间通信远比客户端快，不再请求大量js文件，使得SSR/SSG拥有更短的首屏时间
什么是Next.js
SSR的实现
基于React提供的相关服务器端渲染API实现，
Next.js
构建于Node.js之上的开源Web框架，支持基于React的Web应用程序功能，例如服务端渲染和生成静态网站
数据注入
getInitialProps
服务器端执行，数据注入api
特点：在页面link等内部跳转过程中，会走客户端跳转；若刷新访问页面，会走服务器端
getServerSideProps
特点：在页面link等内部跳转过程中，也会走服务器端跳转
推荐在SSR中使用
getStaticProps
SSG，服务器端构建时执行
CSS Modules
Next.js支持使用文件命名的CSS Modules
Layout
导入基础layout，实现基础页眉页尾
文件式路由
根据文件目录生成路由
BFF层的文件式路由
对数据进行处理然后交给模板页面的api，不影响客户端bundle体积
路由跳转
- next/link 跳转
- useRouter跳转
Header的修改
修改TDK(title, descritption, keywords)
多媒体适配 —— CSS适配
- 移动端设备
- ipad
- media.css
多媒体适配 —— JS适配
userAgent === Environment.mobile
userAgent === Environment.pc
大图优化 - webp
png to webp，减小图片体积
但在快网速下，渲染时间长于png，因其解析时间高于png
服务器端开发
调试
- js terminal debugger
- npm run debugger — 浏览器中打开服务器端控制台
Strapi — headless CMS
接口生成过程：
- 编辑结构提
- 配置数据源并发布
- settings roles 选择对应角色并勾选要发布的接口类型
- 显示子结构体，需要加上populate=deep参数
核心功能实现
localhost 127.0.0.1是跨域的，无法实现主题共享
