这是我参与「第五届青训营 」伴学笔记创作活动的第8天
课堂重点🗒️🖋️👉目标：具备 C 端 Web 应用开发的基本能力
- CSR,SSR,SSG
- 什么是 Next.js
- Next.js 客户端、服务端开发
一、前端渲染方案 CSR / SSR / SSG
-
CSR： 客户端渲染(Client-Side Rendering)。常见 B 端 WEB 应用开发模式，前后端分离,服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的 HTML 用户在后续访问操作.
-
SSR: SSR(Server-Side Rendering)。不是什么新鲜的概念，从原先的 JSP / PHP 就已经体现了服务器端渲染。
- 同构SSR: BFF - Backend For Frontend，服务于前端应用的后端。前后端—体化，一套React 代码在服务器上运行一遍,到达浏览器又运行一遍。前端后端都要参与渲染，而且首次渲染出的 HTML 要一样。
-
SSG: 静态站点生成(Static Site Generation) ,在构建的时候直接把结果页面输出 html 到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源
- CDN: 建立并覆盖在 Internet 之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。
SSG 例子实现-仓库地址:https:/lgithub.com/czm1290433700/ssr-server
相比 SSR，因为不需要每次请求都由服务器端处理,所以可以大幅减轻服务器端的压力。缺陷在于只能用于偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面都是相同的。
SSR， SSG 的优势
- 利于 SEO。 -浏览器的推广程度，取决于搜索引擎对站点检索的排名，搜索引擎可以理解是一种爬虫，它会爬取指定页面的 HTML ，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果。
- 更短的首屏时间。 - SSR / SSG 只需要请求一个HTML文件就能展现出页面，虽然在服务器上会调取接口,但服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取。因为不再需要请求大量 js 文件，这就使得 SSR / SSG 可以拥有更短的首屏时间。
什么是 Next.js
Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。
- 优点：上手快，能力集全,而且覆盖了足够多的性能优化和生态。
- 对于新同学掌握前后端一体化的开发模式很友好。
核心概念
Next.js 具有两种形式的预渲染:静态生成(Static Generation)和服务器端渲染(Server-side Rendering)。这两种方式的不同之处在于为 page(页面)生成 HTML 页面的时机。
拓展：呈现页面所需的数据在用户请求之前的构建时可用静态生成。数据不是用于特定用户的，并且可以被公开缓存。常见的页面类型有:
- 营销页面
- 博客文章
- 电子商务产品列表
- 帮助和文档
- 如何使用
三、Next.js 开发
process.browser, true 为客户端，false 为服务端。
CMS仓库地址: https:/l/github.com/czm1290433700/nextjs-cms Demo仓库地址: github.comlczm1290433700/nextjs-demo
- getStaticProps
- SSG，在服务器端构建时执行。如果涉及动态路由(带参数)，需要使用 getStaticPaths 配置所有可能的参数情况。
- CSS Modules
- Next.js 支持使用文件命名约定的 CSS 模块。
[name].module.css - Layout
- 通过在入口文件导入 layout ,可以实现每个页面公共的页眉页尾.
文件式路由
Next.js 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到 pages 目录中时，它会自动作为一个路径可用。
路由格式：
- ./pages/demo/index.tsx =>/demol/
- ./ pages/demo/[id].tsx =>/demo/:id
- ./ pages/demo/[...id].tsx =>/demo/a/b/c => id = [ "a"，"b"，"c"]
BFF 层的文件式路由
BFF，作为服务器构建包，不影响客户端构建 bundle 体积。相同的 router 生成方式，不过是作为 API 层访问,而不是 page。
路由跳转
header 的修改
可用于修改TDK (title，description，keywords)
结尾
首页功能实现，需要包含以下几点：
- 页面 & 动画 & 多媒体适配
- BFF
- Strapi
主题化功能实现，需要包含以下几点：
- 基础样式和背景的抽离
- 主题化 context 全局注入
- 从注入数据中取出 theme 和 setTheme
- 多进程间的主题同步
综上，今天又是好好学习的一天！ 🥱
