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

本节课的知识要点

1. 课程目标
2. CSR，SSR，SSG
3. 什么是Next.js
4. Next.js客户端开发
5. Next.js服务端开发
6. 核心功能讲解

CSR、SSR、SSG

• CSR（客户端渲染），常见的B端应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML，用户再后续访问操作
• SSR（服务端渲染），在原先JSP/PHP就已经体现了服务端渲染，在这种模式下，java，PHP负责渲染的逻辑，而前端只需要负责UI和交互
• SSG（静态站点生成），在构建的时候直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回给客户端，相当于一个静态资源
• SSR，SSG是SEO友好的，会在搜索引擎产生一定的优势。
• SSR，SSG会有更短的首屏时间

什么是Next.js

是一个框架，能够帮助我们更好的开发一个SSR或者一个SSG的项目，Next.js是基于React提供的相关服务器渲染API实现，整个过程实现比较繁琐重复，对于新手来说是不友好的，于是就诞生了这样一个封装好的集合来对服务端渲染进行一个快速上手

数据注入的方式

1. getInitialProps
2. getServerSideProps
3. getStaticProps

CSS Modules

在类名中加入哈希值，避免类名重复

路由跳转

1. next/link跳转
2. useRouter跳转
3. 原生方法跳转

多媒体适配

CSS适配 通过rem来进行一个灵活换算 JS适配 监听resize

Strapi - headless CMS

初始化 npx create-strapi-app my-project --quickstart 过程：

1. content-type builder 编辑结构体
2. content manager 配置数据源，并发布
3. setting roles 里选择对应角色并选择要发布的接口类型
4. 如果设计嵌套，在接口后加上populate=deep参数

核心功能讲解

• 首页功能实现
  1. 页面&动画&多媒体室培
  2. BFF
  3. strapi
• 文章页面功能实现
  1. 页面&动画&多媒体室培
  2. BFF
  3. strapi分页
  4. 多媒体格式的转换

个人感悟

通过本节课之后，学习到了Next.js框架究竟是如何去使用，目前正在接触Nuxt.js，虽然是不同一个框架，但是都会给我带来很多启发。而且对于C端页面还有B端页面有了更加深层的认识。受益匪浅！