2.5-SSR服务端渲染
Create by fall on 2022-09-28 Recently revised in 2022-10-14
SSR
为什么要用 SSR
与客户端的单页应用 (SPA) 相比，SSR 的优势主要在于：
- 更快的首屏加载：这一点在慢网速或者运行缓慢的设备上尤为重要。服务端渲染的 HTML 无需等到所有的 JavaScript 都下载并执行完成之后才显示，所以你的用户将会更快地看到完整渲染的页面。除此之外，数据获取过程在首次访问时在服务端完成，相比于从客户端获取，可能有更快的数据库连接。这通常可以带来更高的核心 Web 指标评分、更好的用户体验，而对于那些“首屏加载速度与转化率直接相关”的应用来说，这点可能至关重要。
- 统一的心智模型：你可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用，而不需要在后端模板系统和前端框架之间来回切换。
- 更好的 SEO：搜索引擎爬虫可以直接看到完全渲染的页面。
对比
SPA 大量工作在客户端执行，SSR 大量工作在服务端执行
用代码生成动态的页面，渲染页面
生成动态页面这件事，可以交给后端：SSR，交给前端：SPA
| SPA（Single-page Application） | SSR（Server-Side Rendering） | SSG（Static Site Generation） | |
|---|---|---|---|
| 特点 | 减小服务端压力（编程，请求） | 优化动态网站体验（预渲染） | 静态网站生成和托管 |
| 运行端 | 浏览器 | 服务器 | 服务器 |
| 静态文件 | 单页面，浏览器需要先处理，再展示 | 由服务器即时生成，首屏加载速度非常快 | 多个页面分别读取，极快 |
| SEO | 不适合 | 适合 | 适合 |
| 静态文件 CDN | 适合 | 不适合 | 适合 |
| 适用场景 | 中后台产品 | 信息展示型网站 | 内容较为固定的资讯类网站 |
| 运行（环境）需要 | 浏览器环境即可 | 后端需要配合使用 node | 配合 Markup，对文档进行标记 |