“这是我参与「第五届青训营」伴学笔记创作活动的第 7 天”
主要内容
CSR, SSR, SSG 什么是Nextjs？ Nextjs开发实例
1 课程目标
具备C端Web应用开发的基本能力
- B端：
- Business
- 内网使用
- 面向组织
- 信息流
- C端：
- Consumer/Client
- 连接外网
- 面向个人
- 用户体验
2 CSR、SSR、SSG
2.1 客户端渲染CSR (Client-Side Rendering)
常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作。
SPA单页面应用，它所需的资源（HTML、CSS、JS等），在一次请求中就加载完成。不需要刷新地动态加载，首屏时间更长。
2.2 服务器端渲染SSR（Server-Side Rendering）
不是什么新鲜的概念，从原先的JSP/PHP就已经体现了服务器端渲染。
从图中可以看出，过往的SSR的代码耦合度高，且模板语言中混杂编程语言。这样对于一些复杂的功能，维护起来很痛苦。这种模式下Java、PHP负责渲染的逻辑，而前端只负责UI和交互。
2.3 同构SSR
- BFF（Backend For Frontend）：服务于前端应用的后端，不直接操作数据库，相当于前后端的中介。
- 特点：前后端一体化，一套React代码在服务器运行一遍，到达浏览器再运行一次，前后端均参与渲染，且首次渲染出的HTML一样
2.4 静态站点生成（Static-Site Generation）
- 在构建时直接将结果页面输出html到磁盘，每次访问直接将html返回给客户端，相当于一个静态资源。
- CDN：建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。
- 特点：
- 相比于SSR，因为不需要每次请求都需要服务器端处理，所以可以大幅减轻服务器端的压力。
- 缺陷在于只能用偏静态的页面，无法生成与用户相关的内容，也就是所有的用户访问的页面都是相同的。
2.5 SSR、SSG的优势
2.5.1 利于SEO —— 信息的曝光
浏览器的推广程度，取决于搜索引擎对站点的检索的排名，搜索引擎可以理解为一种爬虫，它会爬取指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的结果。
2.5.2 更短的首屏时间 —— 保障用户体验
SSR/SSG只需要请求一个HTML文件就能展示出页面，虽然在服务器上会调取接口，但服务器之间的通信远比客户端块，甚至是同一台服务器上的本地接口调取，因为无需请求大量JS，所以会有更短的首屏时间。
3 什么是Next.js？
3.1 SSR的实现
- 核心：同构。客户端做的事情，服务端也会做一遍，以保证二者的预期是相同的。
基于React提供的相关服务器端渲染API实现，整个过程实现比较繁琐重复，对从零实现的新手不友好。迫切需要一个封装好的集合来快速上手服务器端渲染。
demo项目：github.com/czm12904337…
- 数据注入
- 脱水&注水
3.2 Next.js
Next.js是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用程序功能，例如服务端渲染和生成静态网站。
- 上手快、能力齐全，而且覆盖了足够多的性能优化和生态。
- 对于新同学掌握前后端一体化的开发模式很友好。
