Appearance
从历史看清 CSR 与 SSR
—— 网页是怎样学会“自己动起来”的
“当你不明白一个技术词时，不妨先问它的来历。”
—— 前端的世界，所有复杂的名词，都是为了修补上一代的缺陷。
一、起点：HTML 只是静态的“文档”
在 1990 年代初，网页其实就是一张张 静态文件。
你点一个链接，浏览器就去服务器拿一份新的 HTML 文本，重新加载整页。
- 页面跳转必然闪烁
- 数据必须服务器拼好再发给浏览器
- 网页就像一本书——只能“翻页”，不能“变形”
那时没有 CSR，也没有 SSR，只有一个事实：
服务器生成整页，浏览器只负责展示。
二、局部刷新：Ajax 和 jQuery 的魔法
2005 年，XMLHttpRequest 让浏览器可以在不换页的情况下向服务器要数据，这就是 Ajax。
有了 Ajax，人们用 jQuery 写出了“局部刷新”的奇迹：不用整页刷新，只更新一个 DIV。
网页第一次“活了”，但也变得混乱：
- 每个模块都在各自改 DOM；
- 状态散落各处；
- 维护困难，像补丁拼起来的机器。
三、SPA：网页变成“应用”
HTML5 时代（2010 年前后），浏览器越来越强：
有了 <canvas>、<video>、localStorage>、history.pushState()……
网页具备了“常驻内存、即时交互”的能力。
于是诞生了 SPA（Single Page Application，单页应用）：
只有一个 HTML 文件，切换“页面”不再刷新整站，而是由 JavaScript 改变视图与数据。
React、Vue、Angular 本质上就是：帮你维护一个“常驻的虚拟世界”。
四、CSR：浏览器自力更生
SPA 的默认模式叫 CSR（Client-Side Rendering，客户端渲染）。
浏览器拿到一个几乎空的 HTML，然后运行 JS 自己把界面拼出来：
html
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>就像舞台拉开前先是空景，演员（JS）随后登场布景。
优点：
- 页面切换快
- 状态保持好
- 交互流畅
缺点：
- 首次加载白屏
- SEO 不友好
- 慢网环境体验差
五、SSR：服务器帮忙搭好首屏
**SSR（Server-Side Rendering，服务器渲染）的思路是：
服务器先运行一遍 Vue/React，把首屏 HTML 生成好再发给浏览器；
浏览器显示内容的同时，JS 在后台加载并激活（hydrate）**事件与状态。
于是用户一打开就能看到内容，同时仍能享受 SPA 的流畅体验。
六、SSG：静态生成的折中方案
很多页面（博客、文档、Wiki）不需要实时渲染。
SSG（Static Site Generation，静态站点生成）在构建阶段就把每个页面预渲染成 HTML，
部署时直接交给 CDN。VitePress、Next.js、Nuxt 都支持这种模式。
你可以把它理解为 SSR 的“冷冻版”：
- SSR：开演前服务器先搭好布景
- SSG：演出前一次画完所有布景
七、三者关系一图明白
| 模式 | 渲染位置 | 首屏速度 | 交互体验 | 典型框架 |
|---|---|---|---|---|
| SSR | 服务器 | 🚀 快 | ⚙️ 中 | Next.js / Nuxt |
| CSR | 浏览器 | 💤 慢（白屏） | ⚡ 快 | Vue / React（SPA） |
| SSG | 构建时 | ⚡⚡ 极快 | 🧊 中 | VitePress / Astro |
八、回望历史：为什么一定要懂“从哪里来”
把时间线拉直，CSR、SSR 不再是生硬缩写，而是一条清晰的因果链：
静态网页太死 → Ajax 局部刷新 → SPA 世界常驻 → CSR 白屏 → SSR 回归首屏 → SSG 性能平衡
所有这些名词，其实都在回答一个核心问题：
“网页应该在哪里被渲染？”
—— 在服务器？在客户端？还是提前生成？
九、结语
下次有人问你 SSR 是什么，不要立刻背定义。请从时间讲起：
“最早网页在服务器渲染，后来变成浏览器渲染。
为了弥补体验与 SEO，我们又回到服务器，但这次带上了 SPA 的灵魂。”
这，就是 SSR 与 CSR 的全部故事。