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

课前预习概念

CDN

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定。

BFF

(Backends For Frontends) 服务于前端的后端。后端各种微服务、API之间的一层胶水代码。主要的业务场景请求转发、数据组织、接口适配、权鉴和SSR。

SSR

(Server Side Rendering)服务端渲染，传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

CSR

(Client Side Rendering)是一种目前流行的渲染方式（客户端渲染），它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

常见于B端应用开发，前后端分离，服务器压力相对较轻。渲染工作在客户端进行服务器直接返回不加工的HTML，用户在后续访问操作。

SSG

(Static Site Generation) 是静态站点生成，解析是在构建时执行的，当发出请求时，html 将静态存储，直接发送回客户端。

SEO

Search Engine Optimization, 搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。

TDK

网站首页的TDK(title、description、keywords)。

CSS Modules

A CSS Modules is a CSS file in which all class names and animation names are scoped locally by default.（一个 CSS 文件，默认情况下，其中所有类名和动画名的范围都在本地。）

跨域

指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

CMS

Content Management System内容管理系统，是为了方便发布网络内容而存在的一体化Web管理系统。

课上概念介绍

1. B端应用（to business）对内使用

2. C端应用（to Customer）是面向终端用户或消费者的产品

next.js是用于开发C端应用的

3.CSR

首屏：指从输入连接到打开页面的时间。

CSR：渲染的工作都在客户端进行，后端不会关注html页面（也不会对其进行加工）。

例如上图第一个页面，是market_flow当前域名下访问后返回的一个Response,这个Response里没有设计html页面中的元素，只有他的一个框架结构。【很显然这样的客户端渲染不适用于C端应用。在B端应用，比如学校内的管理平台中更合适一些。】

4.SSR

C端开发模式会使用到SSR

SSR的一个痛点：服务器端压力相比于CSR较大。

5.BFF

BFF: 复杂度较高的项目，会在前端和后端之间添加的一个Node.js文件。确保了项目的可维护性及可复用性

6.SSG

SSG不会在每一次请求的时候都向服务器端请求，会在一开始构建的时候，把所有的结果从html上传到CDN上。之后在访问路由的时候和在访问一个纯静态的html文件的效果相同。
优点：相比SSR，可以大幅度减轻服务端压力。
缺陷：只能用于偏静态的页面。

7. SSR，SSG的优势

SEO
- 制作C端应用的重点就是信息的曝光,也就是搜索引擎的排名。（搜索引擎的原理就是爬虫）
更短的首屏时间
- 只需要请求一个html文件，无需请求所有的内容

Next.js实战项目|青训营笔记