前端与Next.js | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第6天

Next.js实战项目

Next.js开发c端应用，而不是开发b端应用，b端：内网

前后端一体化，一套React代码要在服务器上运行一遍，还要再浏览器上运行一遍。前端后端都要参加渲染，并且首次渲染出的HTML页面要一样。

静态站点生成，在构建的时候直接把结果输出到本地磁盘之中，每次访问都要把HTML返回给客户端，相当于一个静态资源。

不同构无法保证事件触发。

脱水注水：在服务器中将HTML中一些数据拖出来成水，在客户端的时候进行注入。水（数据）

客户端最重要的是数据注入

getSeverSideProps只会在服务器端走，getInitialPropos在页面打开的时候在服务器端走，在router路由跳转的时候在客户端走

getStaticProps SSG,数据不多的情况下，如何路由涉及带参数，需要配置素有参数可能情况

Next.js支持使用文件名约定的CSS模块。[name].module.css.

多媒体适配--CSS适配 + JS适配

webp体积比png少很多,在慢网速情况下，wep解析快，在快网速下，webp慢几百ms,解析时间较长

strapi-headlessCMS CMS数据管理平台 github.com/strapi/stra…

content-type builder编辑结构体
content manager配置数据源，并且发布
settings roles里选择对应角色并且勾选发布的接口类型
如果涉及嵌套，在接口后面加上populate=deep参数（npm install strapi-plugin-populate-deep --save）,没有安装加参数populate=*,但是只能嵌套一层

页面&动画&多媒体适配
BFF
strapi分页(/api/article?pagination[page]=1&pagination[pageSize]=10) 按10个页面分页，返回第一页的数据
多媒体格式转换

最重要部分：数据注入