这是我参与「第五届青训营」笔记创作活动的第10天. 今天的内容主要记录在学习Next.js前需要了解的相关概念.
Next.js相关概念
CDN
Content Delivery Network, 即内容分发网络.
- 基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定
- 在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络
- 使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
BFF
Backends For Frontends, 服务于前端的后端[1].
- 前端和后端都需要很多接口, BFF意味着谁需要这个接口就谁开发.
- 随着前后端技术分离以及发展, 客户端和微服务的交互称为了新的难题. 应对微服务主要有两种方法, 一种是利用api网关分发请求, 另一种是前端跨域请求. 这两种方法在实际应用中都比较复杂冗余. 因此将部分业务独立出来组成BFF中间层. BFF虽然具有使得使前后端彻底分离等优点, 但同时也增加了系统复杂度和开发成本.
SPA
Single page application, 单页面应用, 所需要的资源(如HTML,JS,CSS等)在一次请求中加载完成, 不需要动态加载, 首屏时间(输入链接到打开页面的时间)更长
SSR,
Server-side rendering，是应用程序通过在服务器(后端)上显示网页而不是在浏览器中渲染的能力. 服务器向客户端发送一个完全渲染的页面, 结合客户端的JS使得页面可以运行起来.[2]
- 相比传统HTML模板引擎, SSR避免重复编写代码
- 相比SPA, 首屏渲染更快, SEO友好.
- 缺点: 通常qps较低, 前端代码编写时要考虑服务端渲染情况.
CSR
Client-side rendering，CSR和SSR的最大不同是提供渲染的是服务端还是客户端
SSG
Static Site Generation, 即静态站点生成. 在构建的时候直接把结果页面输出html到磁盘, 每次访问直接把html返回给客户端, 相当于一个静态资源[3]. 每次更新数据或重新打开页面都要重新渲染.
SEO
Search Engine Optimization, 即搜索引擎优化. 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名
TDK
T是Title即页面标题，D是Description即页面描述，K是Keywords即关键词.
- TDK是搜索引擎对网站进行排名的重要参考.
CSS Modules
是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）[4]
跨域
- 同源策略, 仅允许与本域(同协议, 同域名, 同端口)下的接口交互.
- 不同域就是跨域.
CMS
Content Management System, 即内容管理系统. 是为了方便发布网络内容而存在的一体化Web管理系统
参 考
[1] BFF——服务于前端的后端
[2] 一文带你搞懂 SSR - 知乎 (zhihu.com)
