React Server Components 心智模型速查

一句话

RSC = 服务端组件（无 JS） + 客户端组件（有 JS）的混合，框架按需 hydrate。

三个组件边界

• Server Component：服务端渲染，不发送 JS到客户端
• Client Component：标记 'use client'，发送 JS 到客户端
• Shared Component：可被两边引用的纯展示组件

不能做的

• Server Component 不能用 useState、useEffect、event handler
• Client Component 不能在顶层 import Server Component（但可作 children 传）

心智模型

把 RSC 想成：

Server (always runs)
  └── Client (runs once on server for HTML, then hydrates on client)

客户端组件在服务端先渲染 HTML（为 SEO / 首屏），然后 hydrate。区别只是「客户端组件要发 JS bundle，服务端组件不发」。

跟 Astro Islands 对比

• Astro：默认零 JS，按需 client:load 加岛
• RSC：默认服务端组件，按需 'use client' 加岛

思想几乎一样，区别在生态：

• Astro 是框架无关的，React / Vue / Svelte 都能塞
• RSC 是 React 专属，集成更深