🔷 传统 SPA 架构（CRA / React 脚手架）

index.html（空）
↓
浏览器加载 bundle.js
↓
React 在客户端构建整个 UI 树
↓
用户看到页面（CSR）

🟦 SSR 架构（Next.js 传统 SSR 模式）

用户请求页面
↓
服务器运行 React 组件，生成 HTML
↓
返回 HTML + bundle.js 给浏览器
↓
浏览器 hydrate（绑定事件）

🧩 RSC 架构（React Server Components，App Router）

引入新的组件分类：

类型 渲染位置 有 JS 吗？ 支持 hooks？ 可访问服务端资源？
Server Component 服务器或构建时 ❌ 无 JS ❌ 否 ✅ 可访问数据库/API
Client Component 浏览器 ✅ 有 JS ✅ 支持 ❌ 不能访问服务端资源

流程：

Server Tree（服务端组件）
↓ props 序列化传给
Client Tree（客户端组件）
↓
浏览器渲染 + 部分 hydrate