渲染模式与页面生成策略

前端里最容易混的一组词，就是这几个：

1. CSR
2. SSR
3. SSG
4. ISR
5. MPA
6. 岛屿架构

它们都和“页面怎么出来”有关，但不是同一层东西。

抓住一个问题就够了：

页面里的 HTML，到底是谁生成的，什么时候生成的，浏览器后面还要不要继续接管交互。

把这个问题想清楚，后面这些词就不会越看越乱。

1. 一句话看懂

1. CSR：先给浏览器一个壳子，内容主要靠浏览器跑 JavaScript 再补出来
2. SSR：用户一请求，服务端把 HTML 算好，再发给浏览器
3. SSG：构建时就把 HTML 提前生成好，访问时直接拿现成页面
4. ISR：大体还是静态页面，但可以按时间或访问策略重新生成
5. MPA：一个页面一个入口，切页时通常会重新请求整页 HTML
6. 岛屿架构：大部分内容保持静态，只有少量需要交互的区域跑客户端代码

2. 一张总图

flowchart TD
    A[页面内容要交给用户] --> B{HTML 在哪里生成}
    B -->|浏览器运行时生成| C[CSR]
    B -->|服务端请求时生成| D[SSR]
    B -->|构建阶段预生成| E[SSG]
    E --> F[按访问或时间策略增量刷新]
    F --> G[ISR]
    A --> H{页面组织方式}
    H -->|整页切换| I[MPA]
    H -->|大部分静态 局部交互| J[岛屿架构]

这张图主要是把几件容易混在一起的事拆开：

1. HTML 是浏览器现算，还是服务端先算好
2. 是请求来了再算，还是构建时就算好
3. 页面跳转是整页刷新，还是前端接管
4. 页面虽然先出来了，后面还要不要水合

3. 一张对照表

模式	HTML 主要在哪生成	生成时机	SEO	直观感受
CSR	浏览器	JS 跑起来之后	较弱	首屏更依赖 JS，但进应用后切页通常更顺
SSR	服务端	用户请求时	较好	页面先出来得更快，但服务端更忙
SSG	构建阶段	打包时	很好	最稳，天然适合文档站和内容站
ISR	静态页面为主，按策略重建	构建后按时间或访问刷新	很好	兼顾静态分发和内容更新
MPA	服务端	每次跳页时	较好	每次切页像重新打开一页
岛屿架构	静态为主，局部再水合	混合	很好	页面大部分很轻，只有小块区域跑交互

4. CSR 是什么

CSR 是 Client-Side Rendering，也就是客户端渲染。

你可以把它想成：

浏览器先拿到一个页面壳子，真正的内容要等 JavaScript 跑起来之后，前端再自己拼出来。

常见过程大概是这样：

1. 服务端先返回一个比较轻的 HTML
2. 浏览器下载并执行 JavaScript
3. 前端框架去请求数据
4. 再把页面内容渲染出来

flowchart TD
    A[请求页面] --> B[服务端返回 HTML 壳]
    B --> C[浏览器下载并执行 JS]
    C --> D[前端框架请求数据]
    D --> E[浏览器渲染页面内容]

这种模式的好处很直接：

1. 页面切换通常更顺
2. 前后端分工比较清楚
3. 很适合后台系统和重交互应用

问题也很直接：

1. 首屏更吃 JavaScript
2. HTML 一开始太空的话，SEO 往往不太好
3. 更容易看到白屏、骨架屏这类问题

常见场景：

1. 后台管理系统
2. 登录后操作型系统
3. 交互很重、但不太依赖搜索流量的应用

5. SSR 是什么

SSR 是 Server-Side Rendering，也就是服务端渲染。

最简单的理解就是：

页面内容先在服务端算好，再把已经带内容的 HTML 发给浏览器。

大概过程是：

1. 用户请求页面
2. 服务端拿数据
3. 服务端把 HTML 先拼出来
4. 浏览器把内容显示出来
5. 前端框架再接手页面，做后面的水合和交互

这里的 水合，说白了就是页面看起来已经出来了，但浏览器还得把事件、组件状态这些东西重新接上。

它的好处主要是：

1. 首屏更容易直接看到内容
2. SEO 比纯 CSR 更友好
3. 内容页、搜索落地页更常用

代价也很现实：

1. 每个请求都可能要服务端参与计算
2. 服务端压力会更大
3. 页面复杂的话，服务端渲染和水合都要花成本

6. SSG 是什么

SSG 是 Static Site Generation，也就是静态站点生成。

它和 SSR 最大的区别就一句话：

SSR 是用户来了再生成，SSG 是打包的时候就先生成好。

流程一般是：

1. 构建时把页面 HTML 提前产出来
2. 部署到静态托管或 CDN
3. 用户访问时直接拿现成页面

它常被拿来做文档站、博客站，就是因为稳：

1. 性能稳
2. SEO 好
3. 部署省心
4. 适合走 CDN 缓存

但它也不是万能的。

如果页面内容老在变，而且每次都想拿最新数据，那 SSG 就没那么顺手了。

常见场景：

1. 文档站
2. 博客
3. 营销官网
4. 更新频率没那么高的内容站

7. ISR 是什么

ISR 是 Incremental Static Regeneration，也就是增量静态再生成。

它解决的问题很现实：

我想要静态页面的速度，但内容又不是永远不变。

办法就是：

1. 先按静态页面给出去
2. 到了某个时间，或者满足某个更新条件后
3. 再在后台重新生成一版
4. 后面来的用户拿到新版

所以它不是每次请求都现算。

它意思是：

我大部分时间走静态分发，必要时再把页面刷新掉。

这类模式很适合：

1. 商品详情页
2. 新闻内容页
3. 会更新，但不要求每一秒都绝对实时的页面

看 ISR 时要注意一件事：

短时间里，用户看到旧内容是可能发生的，这本来就是它的设计取舍。

8. MPA 是什么

MPA 是 Multi-Page Application，也就是多页面应用。

你可以把它理解成更传统的网站结构：

一个页面一个入口，切页时通常会重新请求整页 HTML。

所以它的感觉一般是：

1. 页面和页面之间边界很清楚
2. 页面跳转更像重新打开一个页面
3. 服务端路由和模板经常更重要

它的优点是：

1. 页面职责清楚
2. 对 SEO 比较友好
3. 很适合传统服务端页面体系

它的短板也明显：

1. 页面切换不如 SPA 丝滑
2. 整页刷新感更强
3. 跨页面状态共享更麻烦

9. 岛屿架构是什么

岛屿架构问的不是“页面是不是静态”，而是：

页面里到底哪几块真的需要 JavaScript。

它的思路其实很朴素：

1. 大部分内容别乱跑 JS，保持静态就行
2. 真正需要交互的地方，再单独让它动起来

它不是想把整个页面做成一个大 SPA。

它意思是：

该静的地方就静着，真要动的那几块再动。

这类思路很适合：

1. 文档站
2. 内容站
3. 营销站
4. 大部分区域都是展示，只有少量搜索、筛选、评论、表单交互的页面

它的好处是：

1. 首屏更轻
2. 客户端 JavaScript 更少
3. SEO 也更容易做好

但如果整站本来就是重交互应用，那它的优势就没那么大了。

10. 怎么选

如果只想快速判断，用下面这套就够了：

1. 后台系统、强交互应用，优看 CSR
2. 内容首屏和 SEO 很重要，而且请求时就得拿到最新内容，优看 SSR
3. 内容相对稳定，构建时就能确定，优看 SSG
4. 想保留静态分发的好处，但内容会周期更新，优看 ISR
5. 页面天然独立，还是传统服务端网站那套路子，优看 MPA
6. 大部分是静态内容，只有少量交互，优先考虑岛屿架构

11. 和框架是什么关系

这些东西不是某个框架的专属词。

它们本质上分别在说不同问题：

1. CSR / SSR / SSG / ISR 说的是页面什么时候生成、怎么交付
2. MPA 说的是页面怎么组织
3. 岛屿架构说的是交互代码怎么分配

只不过不同框架会把这些能力打包得不一样。

例如：

1. React 生态里常见 Next.js
2. Vue 生态里常见 Nuxt
3. 岛屿架构语境里常见 Astro

别先记框架名，看你的页面内容是谁生成的、什么时候生成的、后面谁来接管交互。