Web 渲染架构：CSR、SSR、SSG、Hydration 与 Islands

> 视频入口：B站合集《前端全链路：从浏览器基础到现代生态》上传并核验后回填正式链接。 > 本文是 EP24 的博客深讲版，包含视频主线，但比视频补充更多机制、流程图、边界判断和排查清单。

Web 渲染架构：CSR、SSR、SSG、Hydration 与 Islands 技术流程图

这篇文章解决什么问题

这期解释页面 HTML 在哪里生成，JavaScript 怎样接管，以及不同渲染架构的取舍。

这一篇的中心问题可以概括成：CSR、SSR、SSG、Hydration 和 Islands 分别解决什么渲染问题？

关键词：CSR、SSR、SSG、Hydration、Islands、client、SPA、server、static、CDN

视频主线回顾

1. CSR

CSR 把主要渲染放在浏览器，适合强交互应用。

2. SSR 与 SSG

SSR 请求时生成 HTML，SSG 构建时预生成 HTML。

3. Hydration

Hydration 让静态 HTML 接上组件事件和状态。

4. Islands

Islands 只让必要区域加载客户端交互。

技术流程图

先用一张图把本期内容串起来。它不是背诵路线，而是排查问题时可以顺着走的证据路线。

mermaid

flowchart TD
    s1["本期内容：渲染架构决定 HTML 从哪里来、交互何时接上"]
    s2["CSR：CSR 把主要渲染工作放在浏览器里"]
    s3["SSR：SSR 在服务器生成首屏 HTML"]
    s4["SSG：SSG 在构建时预生成静态 HTML"]
    s5["Hydration：Hydration 让静态 HTML 接上事件和状态"]
    s6["Islands：Islands 把交互限制在真正需要的区域"]
    s7["整体总结：渲染架构是在内容、交互和性能之间分配成本"]
    s1 --> s2
    s2 --> s3
    s3 --> s4
    s4 --> s5
    s5 --> s6
    s6 --> s7
    s7 --> check{"能否解释当前页面现象？"}
    check -->|能| action["记录证据并进入下一步"]
    check -.->|不能| back["回到上一层重新定位"]
    back -.-> s1

HTML 生成位置与客户端接管

这张图把本期最关键的结构单独拎出来，适合在复习或做笔记时当作索引。

mermaid

flowchart TD
    request["用户请求页面"] --> where{"HTML 在哪里生成？"}
    where -->|浏览器| csr["CSR：下载 JS 后生成界面"]
    where -->|服务器请求时| ssr["SSR：请求时生成 HTML"]
    where -->|构建时| ssg["SSG：提前生成静态 HTML"]
    ssr --> hydration["Hydration：客户端接管交互"]
    ssg --> hydration
    where -->|按岛屿| islands["Islands：只激活需要交互的区域"]
    csr --> tradeoff["权衡：首屏、交互、缓存、复杂度"]
    hydration --> tradeoff
    islands --> tradeoff

深入展开

1. 渲染架构决定 HTML 从哪里来、交互何时接上

这一期看 Web 渲染架构。我们会讲 CSR 在浏览器生成界面，SSR 在服务器生成首屏 HTML，SSG 在构建时预生成静态页面，Hydration 怎样让静态 HTML 接上交互，Islands 如何只让部分区域变成可交互组件。重点是把“内容、交互、性能、缓存”放在同一张图里看。

这里可以多看一层：先找输入，再看处理过程，最后确认输出。前端很多问题之所以绕，是因为现象出现在页面上，原因却可能藏在网络、样式计算、运行时或构建结果里。

mermaid

flowchart LR
    v1["生成 HTML：浏览器、服务器或构建时"]
    v2["传输：网络和缓存"]
    v3["接管：JS 绑定交互"]
    v4["体验：加载与响应"]
    v1 --> v2
    v2 --> v3
    v3 --> v4