【前端】还不知道什么是SSR,SAP吗？讲一讲前端的各种术语

原文：Web Applications 101

传统网站

客户端client：从服务器读取或写入资源的实体。

服务端server：为客户端提供服务的实体。

Web服务器：提供可以通过HTTP传输的格式的资源，资源是服务器上的文件

应用程序服务器：可以提供更多格式的数据。

部署：在服务器上运行一个网站

托管：该服务器为网站提供服务

服务器端路由：当用浏览器访问不同路径时，每次浏览器都会发送不同的HTTP请求，服务器决定返回哪些资源。

瀑布请求：一个请求必须等待另一个请求完成。

当网站不仅仅是HTML时，CSS和JS文件会链接在HTML中，浏览器在解析HTML时，会对每一个链接发送一个请求。

这时网站都是用HTML、CSS、JS直接写的，都是静态页面。客户端向服务器发送请求，服务器返回静态HTML。

Web 2.0

随着需求发展，用户不在满足于只读内容，还想要创造内容，于是服务器需要提供动态内容。将数据保存在数据库中动态引用。此时，可以由服务端的Web服务器解释的PHP语言比较流行。浏览器只用来提交用户数据，所有逻辑都在后端进行处理。

服务器端渲染SSR：在浏览器请求页面URL的时候，在服务端完成页面的 html 拼接处理， 然后再发送给浏览器，渲染不依赖JS。

模板引擎：适用于不同编程语言，在HTML和动态数据发送到客户端之前对其进行插值。

SPA

2010年后单页应用程序SPA的出现让JS流行起来。在此之前JS只是用来做动画或者一些DOM操作的。

单页应用程序SPA：加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。也就是网页上通过hash(#)的变化来实现推动界面变化,通过不同的组件切换,展示所对应的功能模块,也避免了页面的重新加载

和之前的区别：之前由于服务器路由，切换一个路径就要重新请求HTML页面。SPA在加载页面的时候加载打包文件，只在首屏时请求一次HTML和JS，JS知道如何渲染以及渲染什么。

这本质上是模板引擎，只不过是在客户端上执行的，所以成了客户端渲染CSR。

客户端渲染CSR：不在提供由服务端预渲染的HTML，而是提供JS在客户端上运行渲染HTML。

客户端路由CSR：同样的，路由也有JS接手。

代码分割

随着应用变大，JS文件也开始变大，首屏时间太长影响用户体验。对于一个大型应用，一次性加载整个JS文件显然是一个不明智的做法。于是代码分割（也叫懒加载）出现。

代码分割：每次只加载需要的部分JS文件。需要新的JS文件时发送新的请求。

其实这和传统网站非常相似。但代码分割不是在路由级别进行的，我们可以将组件提取到独立的JS包中。但这样也会造成冗余请求。可以启用浏览器缓存请求的JS文件，下次需要时可以直接从缓存中获取。通过检查基于时间戳的哈希值命名，避免获取到未更新的旧缓存

代码分割也可以提高代码的可复用性。

为了将一个React应用程序打包成一个或多个JS文件，还会使用tree shaking技术：去除未使用的代码，不会出现在最终的打包产物中。

全栈应用

由于单页应用程序知道如何渲染以及渲染什么，但是没有实际需要渲染的数据，于是还需要从应用服务器请求数据（一般用JSON传递）。

所以对于CSR，你会有两个感受：

• 到处都有加载器。一整个页面有一个，然后是较小的部件有多个，因为请求数据是在渲染初始页面之后发生的。
• 导航到另一个路由是瞬时的

进行了额外的数据获取后，还需要在客户端进行状态管理。通过状态管理可以最大限度地减少数据请求。

API：客户端和服务器之间的接口。

客户端-服务端通信

传统的全栈应用程序使用REST作为API范式。

GraphQL是REST的现代替代方案。

客户端：在浏览器中呈现 Web 应用程序所需的所有内容

服务器：处理来自客户端的读取和写入数据的请求。

前后端

前端：用户能在浏览器上看到的一切。

后端：幕后的逻辑，比如读写数据库、与其他应用通信等。不应作为源代码公开给前端应用程序的业务逻辑；建立与第三方数据源（例如数据库）的敏感连接。

微服务

微服务是一种将一个大后端（也称为整体架构）拆分为较小后端（微服务）的架构。每个较小的后端可能具有一个特定于域的功能，但它们毕竟都服务于一个前端（或多个前端）。然而，一个后端也可以消耗另一个后端，而前一个后端成为客户端，而后一个后端成为服务器。

后端即服务 (BaaS)：后端应用程序除了读取和写入数据库、允许某些用户执行某些操作（授权）或首先对用户进行身份验证（例如登录、注销、注册）之外，不会做太多事情。这时你就可以使用后端即服务Backend-As-A-Service。

全栈之外

SSR 2.0

使用React做SSR。例如全栈框架Next.js，是在根据目录进行路由，用户导航到哪个路径就由服务端渲染插入数据发送到客户端。优点就是提高首屏时间和SEO。

静态站点生成 SSG

与服务器端渲染 React 相比，静态文件不是在用户请求时动态创建的，而是仅在构建时创建一次。对于数据经常变化的动态内容（例如电子商务）来说，这可能是一个缺点，但是，对于内容不经常变化的营销页面或博客来说，偶尔构建一次网站是完美的解决方案。将其编译为静态 HTML 和 JavaScript 文件。然后所有这些文件都可以托管在网络服务器上。如果用户访问 URL，静态文件将提供给浏览器。