这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
课程大纲
- 课程目标
- CSR、SSR、SSG
- 什么是Next.js
- Next.js客户端开发
- 休息时间
- Next.js服务端开发
- 核心功能讲解
课程目标
CSR, SSR, SSG
- CSR：客户端渲染（Client-Side Rendering）。常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作
- SSR：SSR（Server-Side Rendring）。不是什么新鲜的概率，从原先的JSP/PHP就已经体现了服务器端渲染。
- 同构SSR：BFF:Backend For Frontend，服务于前端应用的后端。
- SSG：静态站点生成（Static Site Generation）,在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源 CDN:建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。
SSR,SSG的优势- 利于SEO
SSR,SSG的优势- 更短的首屏时间
什么是Next.js
SSR的实现
Demo仓库
Next.js：Next.js 是一个构建于 Node.js之上的开源 Web 开发框架支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。
上手快，能力集全，而且覆盖了足够多的性能优化和生态。
对于新同学掌握前后端一体化的开发模式很友好。
初始化
npx create-next-app@latest --typescript
Next.js客户端开发
Next.js初始化
数据注入
Nextjs服务端开发
BFF层开发
调试方式
Strapi - headless CMS
核心功能讲解
首页功能实现
- 页面&动画&多媒体适配
- DFF
- Strapi
文章页实现
主题化功能实现
- 基础样式和背景的抽离
- 主题化conttext全局注入
- 从注入数据中取出theme和setTheme
- 多进程间的主题同步
