这是我参与「第五届青训营」笔记创作活动的第8天。
- B端 to business
内部人士使用的应用，例如管理平台
- C端
公众可用
CSR|SSR|SSG
-
CSR
客户端渲染（Client-Side Rendering）。常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作
特点：所需资源（HTML、CSS、JS）在一次请求就加载完成，无法动态加载，首屏时间更长
-
同构SSR
BFF（Backend For Frontend）：服务于前端应用的后端
服务器端渲染（Server-Side Rendering）
特点：前后端一体化，一套React代码在服务器运行一遍，到达浏览器再运行一次，前后端均参与渲染，且首次渲染出的HTML一样
-
SSG
静态站点生成（Static-Site Generation），在构建时直接将结果页面输出到磁盘，每次访问直接将html返回给客户端，相当于一个静态资源
CDN：建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络
相比于SSR，因为不需要每次请求都需要服务器端处理，所以可以大幅减轻服务器端的压力
缺陷在于只能用偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面都是相同的
-
SSR、SSG的优势
-
利于SEO
浏览器的推广程度，取决于搜索引擎对站点的检索的排名，搜索引擎可以理解为一种爬虫，它会爬取指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果
-
更短的首屏时间
SSR/SSG只需要请求一个HTML文件就能展示出页面，虽然再服务器上会调取接口，但服务器之间的通信远比客户端块，甚至是同一台服务器上的本地接口调取，因为无需请求大量JS，所以会有更短的首屏时间
-
什么是Next.js
基于React提供的相关服务器端渲染API实现，整个过程实现比较繁琐，对新手不太友好
Next.js客户端开发
数据注入
-
getInitialProps
只在服务端运行，只能在页面层面进行绑定，采用同构，使用客户端路由跳转
内部跳转(Link)时会在客户端进行数据请求，直接打开不受影响
-
getServerSideProps
只会运行在服务端
-
getStaticProps
涉及动态路由（带参数），需要配置所有可能的参数情况
多媒体适配
@mixin配置多媒体设备
JS适配
大图优化
webp文件
Next.js服务端开发
BFF
类似于express框架
核心功能
首页功能实现
- 页面&动画&多媒体适配
- BFF
- Strapi
文章页实现
-
页面&动画&多媒体适配
-
BFF
-
Strapi分页（/api/articles?pagination[page]=1&pagination[pageSize]=10） // 按10个/页分页，返回第一页的数据
-
多媒体格式的转换
markdown解析：showdown包
html => dom：dangerouslySetInnerHTML
主题化功能实现
- 基础样式和背景的抽离
- 主题化context全局注入
- 从注入数据中取出theme和setTheme
- 多进程之间的主题同步
