NextJs ｜ 青训营笔记

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

一、本堂课重点内容：

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

二、详细知识点介绍：

1. CSR, SSR, SSG

1. CSR（客户端渲染 Client Side Render）

即在客户端渲染网页结构，一般情况下我们所熟知的 Vue、React 均采用这种模式。在构建时并不会生成HTML结构，仅仅包含js代码的引用。在浏览器端将HTML结构渲染出来。客户端渲染会在项目体积较大的时候可能会导致较长的首屏加载时间，用户体验不好，且对于SSO来说并不友好。

2. SSR（服务端渲染 Server Side Render）

浏览器请求时，服务器直接生成HTML结构并返回，这种模式其实并不少见，曾经的php和jsp都是这种模式。Vue 和 React 也对这种模式进行了支持，例如 React 下有 Vercel 主导的 Next.js 框架支持服务端渲染，Vue 下也有类似的框架 Nuxt.js。与前者的区别是，php和jsp的前后端代码实际上仍是分离的，需要动态交互的部分还是需要js介入。而React和Vue在服务端和客户端都是同一套代码，这也就导致其比前者多了一步水合 hydrate (也称注水) 的操作。

在这种模式下，服务端在生成HTML的同时对其进行“脱水”，即将渲染结构的初始数据分离出来，单独储存，以便让前端读取。在浏览器收到页面后，相关的代码读取这部分内容，再对html结构进行“注水”（水合），使得服务端和客户端的数据同步，且浏览器端的元素能够正常交互。

比起CSR，SSR能够大幅缩短首屏加载的时间，且对于SSO友好，但是需要服务器支持。

3. SSG（静态网页生成 Static Site Generation）

这种形式实际上和SSR类似，但是无需运行一个服务端，HTML结构在构建时就已经创建完了，用户访问时，仍然是个静态页，却具有SSR首屏加载时间短的优势，适合那些修改不频繁的站点，例如一些开发文档。

2.什么是 Next.js

基于 React 提供的相关服务器端渲染 API 实现 ， 整个过程实现比较繁琐重复 ， 从零实现对新上手同学很不友好迫切需要一个封装好的集合来快速上手服务器端渲染。

Next.js是一个构建于 Node.js之上的开源 we b 开发框架 ，支持基于 React 的 web 应用程序功能 ， 例如服务端渲染和生成静态网站 。上手快 ， 能力集全 ， 覆盖了足够多的性能优化。

对于新同学掌握前后端一体化的开发模式很友好 。

3. Next.js 客户端开发

1. Next.js 初始化
2. 数据注入
3. getlnitiaIProps
4. getServerSideProps
5. getStaticProps
6. CSS Modules
7. Layout
8. 文件式路由
9. B F F 层的文件式路由
10. 路由跳转
11. header 的修改
12. 多媒体适配—— CSS 适配
13. 多媒体适配—— JS 适配
14. 大图优化—— webp

4. Next.js服务端开发

1. BFF 层开发
2. 调试方式
3. Strapi —— headless CMS

5. 核心功能

首页功能实现

1. 页面 & 动画 & 多媒体适配
2. BFF
3. Strapi

文章页实现

1. 页面 & 动画 & 多媒体适配
2. BFF
3. Strapi 分页
4. 多媒体格式的转换
   • markdown 转 html
   • html 转 dom
   • 公共样式的定义

主题化功能实现

1. 基础样式和背景的抽离
2. 主题化 context 全局注入
3. 从注入数据中取出 theme 和 setTheme
4. 多进程间的主题同步

三、实践练习例子：

思考题 ： http://localhost:3000 和 http://127.0.0.1:3000 主题可以共享吗

答案是不能

如果存在localstorage里

那么这俩域名不是同域名

不会共享

初始化 Next.js 项目

Next.js 提供了一个脚手架，直接就能够创建项目

npx create-next-app@latest --typescript

接下来就能够看到创建完成的项目目录了。可能会有下面这些文件

.eslintrc.json - eslint 的配置文件，配置了eslint使用的语法规则

.gitignore - git 仓库的忽略文件

next-env.d.ts - TypeScript 的类型定义，是为了方便引入Next声明的类型

next.config.js - Next.js 的配置文件

pages - 页面目录

styles - 样式目录

public - 公共资源目录，会在构建时被原样拷贝

四、课后个人总结：

本次课程讲解了 Next.js 的基础概念、客户端开发以及服务端开发，以及核心功能的实现，让我对 Next.js 拥有了更多的了解，它的客户端和服务端的开发可以让我们更有效的实现功能，并且在项目构建的时候可以利用它的脚手架快速创建项目，实现更加高效的开发。