NextJS（青训营）

nodejs应用场景

1. 前端工程化（webpack vite esbuild beble……）
2. web服务端应用（vercel）
3. Electron跨桌面端应用（vscode)
4. 优点：
   • 学习曲线平滑 开发效率较高
   • 运行效率相对较高
   • 社区生态及工具链成熟
   • 与前端结合的场景很有优势

nodejs运行时结构

node调试

借助于inspector工具可以查看内存使用情况，也就是内存泄漏等 或者是debug的操作

CSR SSR SSG

1. CSR介绍
   
   一次性加载完 首屏时间更长 服务端返回的html中没有内容 一般是前后端分离模式

2. SSR介绍
   

3. SSG介绍
   

4. SSR和SSG的区别
   
   ssr和ssg的好处
   

ssr数据注入

getInitialProps

在页面当中点击link，会在客户端进行跳转 如果直接打开该页面，则会在服务端走

getServerSideProps

这个方法只会在服务器端走

getStaticProps

这个就是提到的ssg，也就是CDN加速，一般用于返回静态文件

CSS Modules

给类名加哈希

layout组件

路由配置

没有固定的文件来写路由，会根据文件名字自动生成路由

BFF

api中的文件（数据的搬运工，向cms中请求数据，将数据拼凑后返回给模板页面，并不处理数据）

路由跳转

提供了两种方式

1. next/link的方法 在link中添加
2. nextRouter ，使用useRouter钩子去跳转
3. 原生的window.open,window.location都是可以的

header的修改

引入Header

定制每个页面的TDK

多媒体适配

大图优化

webp

webp格式的图片因为被处理过，所以图片体积会更小，但是图片的解析会更慢
我们一般都是苦于请求时间，也就是说，当我们在慢网时，那么使用webp很好，因为请求的更快了
但是如果在快网情况，300kb的webp和600kb的png请求并没有太大区别，反而webp的解析时间大于png
另外Webp存在着兼容问题

BFF层开发

nextjs不区分请求方式，这一点与express不同，我们可以在请求头中对method进行判断

调试

因为是在服务端走的，因此我们浏览器端的debug是不起作用的，因此我们可以使用
vscode提供的 Javascript Debug Terminal

之后在新打开的终端中重新启动npm run dev
如果我们还是想在浏览器中进行调试 那么我们可以使用npm run debugger命令，需要注意package.json文件中的配置信息

之后就会看到浏览器中服务端的控制台

Strapi cms

cms 数据管理平台，相对数据库的使用来说，更加容易理解，对于运营者来说更加方便，成本更低

子结构体中还存在结构体，一定要加上populate=deep才可以

文章分页实现

不需要我们去额外开发，默认我们带上参数之后就有

主题化配置

2023-02-01 23:17:43 星期三2