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

Murmure670
184 阅读5分钟

Next.js 实战项目

课程目标

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

CSR，SSR，SSG

CSR

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

SPA：单页面应用，它所需的资源（HTML CSS JS等），在一次请求中就加载完成，不需要刷新地动态加载，首屏时间更长

SSR

SSR(Server-Side Rendering)。不是什么新鲜的概念，从原先的 JSP/PHP 就已经体现了服务器端渲染。image.png代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很痛苦

这种模式下 Java，PHP 负责渲染的逻辑，而前端只负责 UI 和交互

同构 SSR

BFF：Backend For Frontend,服务于前端应用的后端image.png

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

SSG

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

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

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

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

SSR，SSG 的优势 - 利于 SEO

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

image.png

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

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

什么是 Next.js

SSR 的实现

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

Demo 仓库：github.com/czm12904337…

Next.js

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。

上手快，能力集全，而且覆盖了足够多的性能优化和生态。

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

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

Next.js 客户端开发

Demo 仓库

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

Demo 仓库地址：github.com/czm12904337…

Next.js 初始化

npx create-next-app@latest --typescript

image.png

image.png

数据注入

image.png

image.png

getInitialProps

image.png在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由

意味着如果使用 router 跳转当前页，会在客户端执行这部分逻辑

getServerSideProps

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

getStaticProps

image.pngSSG，在服务器端构建时执行

如果涉及动态路由（带参数），需要使用 getStaticPaths 配置所有可能的参数情况

CSS Modules

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

Layout

image.png

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

文件式路由

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

BFF 层的文件式路由

image.png

路由跳转

image.png

image.png

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

header 的修改

image.png可用于修改TDK（title，description，keywords）

多媒体适配

CSS 适配

image.png

image.png

JS 适配

image.png

大图优化 - webp

image.png

image.png

Nextjs 服务端开发

BFF 层开发

image.png

image.png

和 Express 等开发类似

区别就是并没有参数可以直接区别请求类型

调试方式

image.png

image.png

image.png

Strapi - headless CMS

仓库：github.com/strapi/stra…

初始化：npm 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. 页面 & 动画 & 多媒体适配
  2. BFF
  3. Strapi

文章页实现

  1. 页面 & 动画 & 多媒体适配
  2. BFF
  3. Strapi 分页（/api/articles?pagination[page]=1&pagination[pageSize]=10//按10个/页分页，返回第一页的数据）
  4. 多媒体格式的转换
  • makdown 转 html：npm install showdown --save
  • html 转 dom：dangeroulySetlnnerHTML
  • 公共样式的定义

主题化功能实现

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

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

avatar
文章
阅读
粉丝