🔷 传统 SPA 架构（CRA / React 脚手架）
index.html（空）
↓
浏览器加载 bundle.js
↓
React 在客户端构建整个 UI 树
↓
用户看到页面（CSR）
- 首屏空白，等待 JS 加载和执行
- 所有渲染逻辑都在浏览器中完成
- Bundle 大，TTFB 高，不利 SEO
🟦 SSR 架构（Next.js 传统 SSR 模式）
用户请求页面
↓
服务器运行 React 组件，生成 HTML
↓
返回 HTML + bundle.js 给浏览器
↓
浏览器 hydrate（绑定事件）
- 首屏直接看到 HTML，体验好
- 所有组件仍然在客户端 hydrate，有 JS 负担
- SEO 友好，但仍打包了完整组件 JS
🧩 RSC 架构（React Server Components，App Router）
引入新的组件分类：
| 类型 |
渲染位置 |
有 JS 吗？ |
支持 hooks？ |
可访问服务端资源？ |
| Server Component |
服务器或构建时 |
❌ 无 JS |
❌ 否 |
✅ 可访问数据库/API |
| Client Component |
浏览器 |
✅ 有 JS |
✅ 支持 |
❌ 不能访问服务端资源 |
流程：
Server Tree（服务端组件）
↓ props 序列化传给
Client Tree（客户端组件）
↓
浏览器渲染 + 部分 hydrate
- 大部分组件在服务端渲染为 HTML，无需 JS
- 客户端只对标记为
"use client" 的组件进行 hydrate
- 极大减少 JS 体积和客户端压力
✅ 架构对比总结
| 架构类型 |
是否 SSR |
是否 JS 渲染 |
首屏速度 |
SEO 友好性 |
JS 开销 |
| CRA / SPA |
❌ 否 |
✅ 是 |
❌ 慢 |
❌ 差 |
😩 一整包 |
| Next.js SSR |
✅ 是 |
✅ 是 |
✅ 快 |
✅ 好 |
😐 全部组件 hydrate |
| Next.js + RSC |
✅ 是 |
✅ 部分组件 |
✅ 更快 |
✅ 最佳 |
✅ 最小化 |