Next.js 实战项目| 青训营笔记

97 阅读1分钟

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

课程重点

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

详细知识点介绍

image.png

CSR, SSR, SSG

CSR

客户端渲染(Client-Side Rendering)。常见B端WEB应用开发模式,前后端分离,服务器压力相对更轻,渲染工作在客户端进行,服务器直接返回不加工的HTML用户在后续访问操作

image.png

SSR

SSR(Server-Side Rendring)。不是什么新鲜的概率,从原先的JSP/PHP就已经体现了服务器端渲染。

image.png

同构SSR

BFF:Backend For Frontend,服务于前端应用的后端。

image.png

SSG

静态站点生成(Static Site Generation),在构建的时候直接把结果页面输出html到磁盘,每次访问直接把html返回给客户端,相当于一个静态资源 CDN:建立并覆盖在Internet之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。

image.png

SSR,SSG的优势- 利于SEO

image.png

SSR,SSG的优势- 更短的首屏时间

image.png

什么是Next.js

SSR的实现

image.png

Demo仓库

image.png

Next.js

image.png

初始化

image.png

Next.js客户端开发

image.png

Nextjs初始化

image.png

数据注入

image.png

getInitialProps

image.png

getServerSideProps

image.png

getStaticProps

image.png

CSS Modules

image.png

Layout

image.png

文件式路由

image.png

BFF层的文件式路由

image.png

路由跳转

image.png

header的修改

image.png

多媒体适配--CSS适配

image.png

多媒体适配--JS适配

image.png

大图优化- webp

image.png

Nextjs服务端开发

BFF层开发

image.png

调试方式

image.png

Strapi - headless CMS

image.png

核心功能讲解

首页功能实现

image.png

文章页实现

image.png

主题化功能实现

image.png

引用参考

Next.js 实战项目