Next.js ｜ 青训营笔记

用户3724448817007
135 阅读1分钟

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

今日课程重点

1. 前端三种渲染方式 2. Next.js 3. Next.js客户端开发 4. Next.js服务端开发

1. 前端三种渲染方式

前端主流的渲染方式：CSR SSR SSG

CSR

image.png SSR

image.png

image.png SSG

image.png SSR,SSG的优势

image.png

image.png

image.png

2. Next.js

image.png 初始化： npx create-next-app@latest --typescript

3. Next.js客户端开发

image.png 数据注入 image.png 数据注入-getInitialProps

image.png 数据注入-getServerSideProps

image.png 数据注入-getStaticProps

image.png CSS Modules

image.png Layout

image.png 文件式路由

image.png BBF层的文件式路由

image.png 路由跳转

image.png header的修改

image.png 多媒体适配-CSS适配

image.png 多媒体适配-JS适配

image.png 大图优化-webp

image.png

4. Next.js服务端开发

image.png

image.png

image.png

avatar
文章
阅读
粉丝