一张可被用户访问的页面，可以被拆分为主文档(html）和 数据 两个部分，这两个部分既可以是组合在一起的（SSR），也可以是分离的（SPA、异步渲染）。比如一些活动搭建平台，可以增加一个数据网关，实现SSR，提升用户体验。
服务端渲染（Server-Side Rendering，SSR）
服务端渲染是一种在服务器上生成完整页面HTML的开发模式，然后直接发送到客户端。这对于SEO（搜索引擎优化）以及改进首次页面载入时间非常有利，因为用户可以尽快看到完整渲染的页面，而不必等待所有的JavaScript下载并执行。
例如，假如你有一个利用React开发的博客网站，为了提高文章页面的SEO和加载速度，你可能会使用Next.js这样的框架来实现SSR。当一个用户请求一篇文章页面的时候，服务器将会执行React代码，将文章渲染成HTML，连同必要的CSS和JavaScript一起发送回用户，这样用户就可以立即看到完整渲染的文章内容，搜索引擎也能够索引这些内容。
流行的SSR框架/库:
- Next.js (React)
- Nuxt.js (Vue)
- Angular Universal (Angular)
总结来说，SPA为用户提供流畅的应用体验，异步渲染进一步优化了SPA的响应性和性能，而服务端渲染加强了SEO和初始加载性能。这些技术经常结合使用，为用户提供高质量的Web应用体验。
SPA（单页面应用程序）
单页面应用程序（SPA）是一种网页应用模式，其中的应用在浏览器加载时仅加载单个HTML页面，并在用户与应用交互时动态更新该页面的内容。SPA通过JavaScript异步与服务端通信拉取数据，然后使用客户端的模板和数据绑定技术来刷新页面上的部分区域，而不是加载新页面。
举个例子，假设有一个邮箱应用，这个应用是一个SPA。当用户点击一个邮件条目时，不会有页面刷新，而是通过JavaScript (使用XMLHttpRequest或Fetch API) 异步地从服务器请求这封邮件的内容，然后动态地在当前页面更新邮件详情显示区域。
流行的SPA框架/库:
- Angular
- React —— React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
- Vue.js
异步渲染（Async Rendering）
异步渲染通常指的是在客户端应用程序中进行非阻塞的UI更新。在传统的渲染过程中，UI渲染任务可能会阻塞 浏览器主线程，导致性能下降和用户界面延迟。异步渲染使UI更新可以分割成一些小的任务，这些任务可以分散到浏览器的空闲时间执行，从而保持应用的响应性和流畅度。
以React为例，React 16引入了一个新的特性叫作Fiber，它重新实现了核心算法，允许React进行任务分割和优先级调度。这意味着开发者可以利用React的Concurrent Mode，让优先级较低的更新（如从API获取数据后的状态更新）异步执行，而不会阻断用户交互操作（如键盘输入、鼠标点击）的立即响应。