我参与「第五届青训营」伴学笔记创作活动的第8天。今天开始了有关NEXT.JS方面的学习。

B、C端页面

B端页面是针对内部的，而C端页面是在外网上供所有人使用。

CSR,SSR,SSG

CSR

客户端渲染(Client-Side Rendering)常见B端Web应用开发模式
前后端分离，服务器压力较轻，渲染工作主要在客户端进行，服务器直接返回不加工的 HTML 用户在后续访问操作
缺点：首屏时间更长

SSR

服务端渲染(Server-Side Rendering)常见C端Web应用开发模式
JSP/PHP渲染，前端仅负责UI和交互
BFF(Backend For Frontend)同构SSR 服务于前端应用的后端达到前后端一体化
脱水与注水是SSR实现的重要过程
缺点：每访问一次都会生成一个HTML文件，会增加服务器压力

SSG

静态站点生成(Static Site Generation)
在构建的时候直接把结果页面输出html到磁盘，每次访问时直接返回 HTML 给客户端
缺点：只适用于静态界面

SSR、SSG优势

利于SEO（浏览器推广程度）
更短的首屏时间

NEXT.JS（只搬运数据）

有利于快速开发SSR或SSG的项目

客户端

初始化

npx create-next-app@latest --typescript

数据获取

getInitialProps（不友好）、getServerSideProps（SSR）

这两者中getServerSideProps需要拿props包裹，且只在服务器端运行，debugger不会影响客户端运行，getInitialProps可在客户端运行

getStaticProps （SSG）
getStaticPaths 出现动态路由时使用

CSS Modules

文件名格式：[name].module.css

文件式路由

预定义路由优先级更高，可优先匹配路由

路由跳转

next/link
useRouter
原生方法

header修改

可用于修改TDK（title,desccription,keywords）

多媒体适配

例如：

CSS适配

@mixin media-ipad{
  @media screen and(min-width:47.9375rem)and(max-width:75rem){
    @content;
  }
}

JS适配（当组件发生变化时使用）

大图优化

采用webp格式（体积减小，但在快网下解析时间长，部分不支持该格式）

服务端

调试方式

Strapi（快速生成CMS平台）

Content-Type Builder 构建结构体
Content Manger 配置数据源，并发布
Settings Roles 选择角色并勾选接口类型
涉及嵌套时需在接口后添加 populate=deep 参数，安装 strapi-plugin-populate-deep--save 插件，没安装时加populate=*, 但只能嵌套一层

个人小结：

localhost和127.0.0.1是跨域的。课堂中零碎的小知识点较多，但今天有关NEXT.JS的学习为今后项目的开发提供了一些新方法和思路，可以说是受益匪浅。

[NEXT.JS|青训营笔记]