这是我参与「第五届青训营」笔记创作活动的第8天。
一、笔记
客户端渲染CSR Client-Side Rendering：前后端分离，服务器压力相对轻，单页面应用，首屏时间更长，通常是B端页面开发
服务器端渲染SSR Server-Side Rendering
同构SSR：服务端返回的不是一个完整的页面，要保证服务器端和客户端数据同步
静态站点生成SSG：在构建时直接把结果页面输出html返回给客户端，相当于静态资源
SSR、SSG的优势：更短的首屏时间
数据注入方式
getInitialProps：页面刚打开，在服务器端；页面内部跳转，在客户端进行
getServerSideProps：类似，只会在服务器端进行
getStaticProps：SSG getStaticPaths列出不同情况再访问，建议用在量少的情况
CSS Modules，类名后加哈希值，避免重复
文件式路由
预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由
路由跳转：next/link跳转，useRouter跳转
header修改，可修改TDK title description keywords
多媒体适配--css
用rem而不是px
不同页面不同效果，可以加不同组件 JS适配
大图优化-webp
服务器端开发
BFF层开发：和express区别：没有参数可以直接区别请求类型
调试方式：JS debug控制台（是服务器端控制台，可以断到）；npm run debugger 浏览器的node.js控制台，和正常开发一样
cms内容管理系统
Strapi可以快速搭建
初始化：npx create-strapi-app my-project --quickstart
接口生成过程：
1.content-type builder编辑结构体
2.content manager配置数据源，并且发布
3.settings roles里选择对应角色并勾选要发布的接口类型
4.如果涉及嵌套，在接口后加上populate=deep参数（npm install strapi-plugin-populate-deep --save），加参数populate=* 只能嵌套一层
功能实现
首页功能实现
文章页实现：分页strapi有page pagesize，也不需要额外开发
cms几乎不需要改代码
主题化：theme注入器和setTheme；多进程主题同步，local storage控制
localhost和127.0.0.1是跨域的，主题不同步
二、课程实例
next.js ssr demo
next.js cms
