WHY IT MATTERS
先用一句白话理解
浏览器像舞台，组件是可复用的布景，状态是导演手里的剧本；CSR、SSR、SSG 的区别，只是布景在观众进场前还是进场后搭好。
LEARNING OUTCOMES
学完你能做到什么
说清库、前端框架与全栈元框架之间的区别
理解组件树、状态驱动 UI、单向数据流和响应式更新
能按业务解释 CSR、SSR、SSG、ISR、流式渲染与 Hydration
用 TypeScript 和现代脚手架启动第一个组件应用
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
组件与组件树
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
声明式 UI
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
状态与派生状态
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
SPA 与 MPA
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CSR、SSR、SSG、ISR
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Hydration 与流式渲染
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
UI 框架与元框架
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
稳定版、预览版与语义化版本
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
画出一次页面请求从浏览器到服务器再返回的流程图
为新闻页、后台和活动页分别选择渲染方式并说明理由
完成一个无框架版与组件版计数器，对比维护成本
HANDS-ON PROJECT
动手任务
制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。
交付清单
- ✓一张现代前端框架全景图
- ✓三类页面的渲染选型记录
- ✓可运行的 TypeScript 小实验
MINIMUM RUNNABLE CODE
用业务特征选择渲染模式
type RenderingMode = "CSR" | "SSG" | "SSR";
function chooseRenderingMode(
needsSeo: boolean,
changesEveryRequest: boolean,
): RenderingMode {
if (!needsSeo) return "CSR";
return changesEveryRequest ? "SSR" : "SSG";
}
console.log(chooseRenderingMode(true, false)); // SSG先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 画出一次页面请求从浏览器到服务器再返回的流程图
- 为新闻页、后台和活动页分别选择渲染方式并说明理由
- 完成一个无框架版与组件版计数器，对比维护成本
改变约束，验证你真的理解
- 不看教程，独立完成：说清库、前端框架与全栈元框架之间的区别
- 不看教程，独立完成：理解组件树、状态驱动 UI、单向数据流和响应式更新
- 不看教程，独立完成：能按业务解释 CSR、SSR、SSG、ISR、流式渲染与 Hydration
- 不看教程，独立完成：用 TypeScript 和现代脚手架启动第一个组件应用
把实验变成能交付的工程
- 一张现代前端框架全景图
- 三类页面的渲染选型记录
- 可运行的 TypeScript 小实验
- 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
把 React 或 Vue 当作包含数据库和部署能力的完整后端框架
只背名词，不观察首屏 HTML、网络请求和 Hydration 过程
为了追新直接使用 Preview 或实验特性作为生产默认方案
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
不急着背 API。先用一张完整地图认识组件、响应式、路由、构建与渲染模式，理解浏览器、框架和服务器各自承担什么工作。
Q02如果只能保留三个验收结果，应该保留什么？＋
一张现代前端框架全景图；三类页面的渲染选型记录；可运行的 TypeScript 小实验
Q03学习过程中最需要主动避免什么？＋
把 React 或 Vue 当作包含数据库和部署能力的完整后端框架；只背名词，不观察首屏 HTML、网络请求和 Hydration 过程；为了追新直接使用 Preview 或实验特性作为生产默认方案
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“制作“渲染方式实验室”，用同一份文章数据演示 CSR、预渲染与服务端渲染的体验差异。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：说清库、前端框架与全栈元框架之间的区别
- □核心机制已用最小实验验证：画出一次页面请求从浏览器到服务器再返回的流程图
- □风险已检查：把 React 或 Vue 当作包含数据库和部署能力的完整后端框架
- □风险已检查：只背名词，不观察首屏 HTML、网络请求和 Hydration 过程
- □风险已检查：为了追新直接使用 Preview 或实验特性作为生产默认方案
- □交付物可复现：一张现代前端框架全景图
- □交付物可复现：三类页面的渲染选型记录
- □交付物可复现：可运行的 TypeScript 小实验
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。