Next.js | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第3天
一、三种渲染模式
1.CSR
2.SSR
3.SSG
SSR、SSG的优势
- 有利于SEO（搜索引擎优化）
- 更短的首屏时间（不再请求大量js文件）
二、Next.js
1.SSR的实现
2.next.js客户端开发
(1)初始化
npx create-next-app@latest --typescript
(2)数据注入的四种手段
- getServerSideProps
- getStaticProps
- getInitialProps
- 客户端注入
i.getServerSideProps
在服务器端执行，只能在页面层面进行绑定，采用同构，首次为服务器渲染，路由跳转则使用客户端路由
ii.getInitialProps
类似getServerSideProps，但与它不同的是使用router进行路由跳转时，只会在服务端执行这部分逻辑
(3) CSS module
next.js支持使用文件命名约定的CSS模块。 [name].module.css
(4) Layout
通过在入口文件导入Layout,可以实现每个页面的公共页眉页尾
(5) 路由跳转
(6) header的修改
（7）多媒体适配
i.CSS适配
ii.JS适配
(8)大图优化 webp
3. next.js服务端开发
(1)BFF开发
(2)CMS
