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

祛毒a
82 阅读5分钟

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

以下为今日课上笔记内容

一.课程目标

具备 C 端 Web 应用开发的基本能力

6438766a20679ac228e428f398dbe87.png

二.CSR, SSR, SSG

1.CSR

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

ae2b2b13905ed92e1adeefad734ab73.png

2.SSR

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

6f870dcdeebc176894e1c54e6eab165.png

3.同构SSR

前后端一体化，一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。前端后端都要参与渲染，而且首次渲染出的 HTML 要一样

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

d2d3a3efe66637f79405960522df071.png

4.SSG

静态站点生成 (Static Site Generation),在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源

CDN: 建立并覆盖在Imternet 之上由分布在不同区域的边缘节点服务器群组成的分布式网络

相比 SSR，因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力

缺陷在于只能用于偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面都是相同的。 7afdd2166ccf6a6b042f008d0c9b9c3.png

5.SSR，SSG 的优势 - 利于 SEO

浏览器的推广程度，取决于搜索引擎对站点检索的排名，搜索引擎可以理解是一种爬虫，它会爬取指定页面的 HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果

771685e325f12bcb040c1790f9a2eb8.png

6.SSR，SSG 的优势 - 更短的首屏时间

SSR /SSG 只需要请求一个 HTML 文件就能展现出页面，虽然在服务器上会调取接口但服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取因为不再需要请求大量 is 文件，这就使得SSR/SSG可以拥有更短的首屏时间

825c0c5fafbcb46d75d9cf58c2c814a.png

三.什么是 Next.js

1.SSR 的实现

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

411bf9a2f66c6ae41cf72f1468546e6.png

2.SSR 实现 - Demo 仓库

仓库地址: github.com/czm12904337…

3.Next.js

Next.js 是一个构建于 Node.js之上的开源 Web 开发框架支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站上手快，能力集全，而且覆盖了足够多的性能优化和生态。对于新同学掌握前后端一体化的开发模式很友好

3d6fec96306f0c6f01f04968c2b7c6d.png

4.初始化

npx create-next-app@latest --typescript

四.Nextjs 客户端开发

1.demo 仓库地址

CMS 仓库地址: github.com/czm12904337…

仓库地址: github.com/czm12904337…

2.Next.js 初始化

b4e8b59548098ff8a5ff7438c4778f0.png

82963207c74c638671ad8ea4ae59fea.png

e51c4914954858723e9554683f6a165.png

3.数据注入

86b7738b8eb62b2c452335dae1f6851.png

8f42c6047522375ba119ed603cd5140.png

4.getlnitialProps

在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染路由跳转使用客户端路由意味着如果使用 router 跳转当前页，会在客户端执行这部分逻辑

dd051e9a4054444f0923bd060f967d9.png

5.getServerSideProps

SSR，与 getlnitialProps 不同的是即使使用router 跳转当前页，也只会在服务端执行这部分逻辑

865bc944d7f982c743ddd54d2fd50cb.png

6.getStaticProps

SSG，在服务器端构建时执行如果涉及动态路由 (带参数)，需要使用getStaticPaths 配置所有可能的参数情况

19b008bc3ea0a1513d9c0ca07b12ef6.png

7.CSS Modules

Next.js 支持使用文件命名约定的CSS模块。[name].module.css

2c15e8992dc9fa9eca4030a815a0ea4.png

8.Layout

通过在入口文件导入 layout ，可以实现每个页面公共的页眉页尾

66a960cad4f65aa8e01a71b51d21684.png

549f816e036aacdfb8c92113e317f20.png

9.文件式路由

Next.js 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到 pages 目录中时，它会自动作为一个路径可用

09cf8e696af930dcb4335204e12ffe8.png

10.路由跳转

除了这些外，还可以使用原生方法跳转，不过原生的方法不会进行 Diff 比对渲染性能上 Nextis 提供路由跳转会更好

81015be650ccc41732152e92c7304e1.png

11.header 的修改

可用于修改TDK (title，description， keywords)

5f652f4995c2a883147b16134db502a.png

12.多媒体适配---CSS适配

31b19a1ee991166541a60a509c32c34.png

五.Next.js 服务端开发

1.BFF 层开发

和 Express 等开发类似区别是并没有参数可以直接区别请求类型

07f8f24a25ac3e949f7fc6b98e7e0c0.png

2.调试方式

c88bca9b63078eecbcb30e6548dac76.png

3.Strapi - headless CMS

仓库: github.com/strapi/stra…

初始化: npx create-strapi-app my-project --quickstart

一个接口的生成有以下几个过程:

1）content-type builder 编辑结构体

2）content manager 配置数据源，并且发布

3）settings roles 里选择对应角色并勾选要发布的接口类型

4）如果涉及嵌套，在接口后加上 populate=deep 参数 (npm install strapi-plugin-populate-deep--save)，没安装加参数 populate=* ，但只能嵌套一层

六.核心功能讲解

1.首页功能实现

1)页面 & 动画 & 多媒体适配

  1. BFF

  2. Strapi

2.文章页实现

1)页面 & 动画 & 多媒体适配

2)BFF

  1. Strapi 分页 (/api/articles?paginationlpage]=1&pagination[pageSize]=10 // 按10个/页分页，返回第一页的数据)

4)多媒体格式的转换

  • markdown 转 html: npm install showdown --save
  • html 转 dom: dangerouslySetlnnerHTML
  • 公共样式的定义

3.主题化功能实现

1)基础样式和背景的抽离

2)主题化 context 全局注入

3)从注入数据中取出 theme 和 setTheme

4)多进程间的主题同步

avatar
文章
阅读
粉丝