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

课程目标

• 开发C端web应用

• B端（内网，内部用户）

• C端（外网，外部用户）

CSR, SSR, SSG

CSR(Client-Side Rendering)

• 常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作
• 首屏时间更长
• 不能让搜索引擎拿到所有标签

SSR(Server-Side Rendering)

• 服务器端渲染
• 老SSR
  • 代码耦合度高，模板语言中混杂多语言，维护困难
• 同构SSR
  • 前后端一体化：一套React代码在服务器上运行一遍，到达浏览器又运行一遍。前后端都要参与渲染，且首次渲染的HTML相同

SSG(Static Site Generation)

• 效果与SSR相似

• 在构建是把HTML输入磁盘，每次访问直接把HTML返回客户端，相当于一个静态资源

• 更加节省服务端资源

• 不灵活

• 同构保证事件触发

• 脱水与注水保证多端同步

什么是 Next.js

• 基于Node.js做的开源框架，掌握前后端一体化
• 虽然React有SSR但不满足需求，Next.js更加好用，高效
• getInitialProps：SSR，两端走需兼容Node和V8
• getServerSideProps：SSR，从服务端走
• getStaticProps：SSG，所有情况存入CDN
• 文件式路由
  • 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到pages目录中时，他会自动作为一个路径可用
  • 预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由
• CSS适配

• JS适配
• 大图优化-webp
  • 网卡优化
  • 可以直接转
• CMS
  • 数据管理平台（运营），简单的数据维护
  • Strapi：快速搭建CMS
    • 仓库：github.com/strapi/stra…
    • 初始化:npx create-strapi-app my-project --quickstart
• 主题化功能实现
  • 基础样式和背景的抽离
  • 主题化context全局注入
  • 从注入数据中取出theme和setTheme
  • 多进程间的主题同步