🧭 一、核心概念辨析
| 名称 | 缩写 | 定义 | 关键特性 |
|---|---|---|---|
| 客户端渲染 | CSR | HTML 是壳，内容靠 JS 动态获取再渲染 | SEO 差，首屏慢，交互强 |
| 服务端渲染 | SSR | 请求时由服务端动态生成 HTML 再返回 | 首屏快，SEO 好，需服务器 |
| 静态站点生成 | SSG | 构建时生成完整 HTML 文件，部署到静态服务器 | 超快加载，纯 HTML，部署简单 |
| 单页面应用 | SPA | 所有页面结构都在一个 HTML 中，靠路由模拟多页面 | 快，交互强，但 SEO 差 |
| 混合渲染 | —— | SSG + SSR + SPA 的组合，按需使用 | 性能与灵活性的平衡体 |
🧱 二、技术实现角度
1. SSR 原理
- 页面由服务端在“每次请求时”动态拼接 HTML（Vue、React 都可）
- 使用如
vue-server-renderer、Nuxt SSR 模式等 - 数据来自接口、数据库，注入
context，客户端用store.replaceState()接管
2. SSG 原理
- 在打包时就生成了静态 HTML 文件（文章页、列表页等）
- 内容来源可为
.md、.json、接口（预抓） - 通常使用工具有：Nuxt（
nuxi generate）、Astro、VuePress、Next.js
🧩 三、文件结构与工作流程（Nuxt 示例）
bash
复制编辑
pages/ # 页面模板
content/ # Markdown 内容
app.vue # 根组件
entry-client.js # 客户端入口，挂载 + hydration
entry-server.js # 服务端入口，接收 context，生成 HTML
- SSR：每次请求走
entry-server.js渲染内容 - SSG：构建时跑
entry-server.js，每个页面生成一个.html文件
🔀 四、两种架构对比（SSG vs SSR）
| 对比点 | SSG | SSR |
|---|---|---|
| 页面生成时机 | 构建时 | 请求时 |
| 是否需要服务器 | ❌ 不需要 | ✅ 需要 |
| 是否可预渲染内容 | ✅ 是 | ✅ 是 |
| SEO 友好性 | ✅ 非常好 | ✅ 非常好 |
| 数据更新 | ❌ 需重构站 | ✅ 实时 |
| 性能 | ✅ 极速（CDN） | ❌ 服务端压力大 |
| 适用场景 | 博客、产品页 | CMS、用户定制内容、后台等 |
🛠️ 五、从用户角度如何判断 SSR / SSG / SPA？
| 观察方式 | 判断依据 |
|---|---|
| 查看源代码 | 有完整内容是 SSR/SSG，空壳是 SPA |
| 禁用 JS 是否能显示 | 能 → SSR/SSG；不能 → SPA |
| 首屏加载速度 | 秒开是 SSG，闪现/延迟是 SSR/SPA |
| 页面跳转方式 | 有整页刷新是 SSR/SSG，无刷新是 SPA |
| 页面是否实时更新 | 是 → SSR；否 → SSG |
💬 六、常见问题理解
1. 为什么 SSG 要“全量构建”？
因为 SSG 无法知道某一改动影响了哪些页面，所以默认全部重生成（没有依赖追踪机制）。
2. 我可以把 md/json 存数据库 + SSR 渲染吗？
✅ 可以，这是很多内容系统的常见做法（动态数据，实时展示，适合后台+博客）。
3. 所有方式可以混用吗？
✅ 可以。例如首页用 SSG，文章详情页用 SSR，评论组件用 SPA。现代框架都支持混合渲染。
4. 我写了原生 HTML 和 JS，不也算静态站点吗？为啥要生成？
手写可以，但维护困难。SSG 工具帮你组件化、模板化、批量生成，效率提升非常大。
⚙️ 七、你掌握的核心知识点
| 知识点 | 你已经掌握的能力 |
|---|---|
| SSR 的代码结构 | 明白 entry-server 如何处理 context |
| 客户端 hydrate 过程 | 明白 replaceState 的作用和挂载流程 |
| SSG 的生成机制 | 理解构建流程、为什么慢、数据预渲染 |
| 各种页面渲染方式的适用场景 | 能合理区分 SPA/SSR/SSG 并选用 |
| 如何判断页面渲染方式 | 从用户视角能识别渲染模式 |
| 混合渲染的价值 | 知道怎么用组合策略提升性能 |
