RSC和SSR有什么关系

下面给出一个简明结论，再逐步展开。

• 简明结论：RSC（React Server Components）不是对 SSR（Server-Side Rendering）的替代，而是与 SSR 可以相互配合的渲染架构升级。SSR关注“把可见的 HTML 在服务器生成并发送给浏览器”，RSC关注“哪些组件在服务器执行、哪些在客户端执行，以及如何减少发送到浏览器的 JS”。两者结合时，你既能得到服务器直出的 HTML（利于性能和 SEO），又能显著降低前端需要下载和水合的 JS 体积，并通过流式传输优化交互与数据更新。

一、先分清概念

• SSR（服务端渲染）

  • 含义：在服务器把组件渲染为 HTML，再把这份 HTML返回给浏览器；浏览器随后用 JS 对这份 HTML 进行水合，接管交互。
  • 价值：更快的首屏可见、对 SEO 友好、可结合流式 SSR 逐步输出页面。
  • 代价：通常需要把相当一部分通用组件代码打包到浏览器端进行水合；复杂页面的水合成本较高。

• RSC（React 服务器组件）

  • 含义：把 React 组件分成“服务器组件”和“客户端组件”。服务器组件只在服务器执行，结果不是直接 HTML，而是一种轻量的“UI 描述（Flight payload）”；客户端组件仍在浏览器执行并水合。
  • 价值：服务器组件不会被打包到浏览器，数据获取可在服务器直连数据库/后端，减少 API 中转与客户端 JS 体积；并支持按边界流式传输、消除数据请求瀑布。
  • 约束：服务器组件不能使用浏览器 API，也不能持有会在浏览器交互的状态；交互必须在客户端组件中完成。

二、两者如何协同工作（以 Next.js App Router 为例）

• 初次请求：

  1. 服务器渲染 RSC 树，生成两类流：

     • HTML 流：用于首屏可见（SSR 输出）。
     • RSC（Flight）流：描述组件边界与数据，用于后续在浏览器只对“客户端组件”进行精准水合。

  2. 浏览器立即显示 HTML（快速首屏），随后依据 RSC 流只水合必要的客户端组件（减少 JS 体积与水合工作量）。

• 客户端路由跳转：

  • 不必整页 SSR。浏览器向服务器请求新的 RSC 流，按需更新页面树，仅对新出现的客户端组件做最小水合，交互更顺滑、网络负载更小。

• 数据更新与流式体验：

  • 服务器可以按段返回 RSC 结果，浏览器渐进式更新 UI；结合 React 18 的流式 SSR，可显著改善“快可见、快可交互”。

三、核心区别与互补点

• 关注点不同：

  • SSR：在哪里把 HTML 产出（服务器）。
  • RSC：在哪里执行组件逻辑/拿数据（服务器组件 vs 客户端组件）以及如何减少前端 JS。

• 产出形态：

  • SSR 直接产出 HTML。
  • RSC 产出“可串行化的 UI 描述”，配合框架可同时产出 HTML（通过 SSR）与 Flight 流。

• JS 体积与水合：

  • 仅 SSR：通常需要较多通用组件在客户端水合。
  • RSC+SSR：服务器组件不打包到客户端，只有客户端组件水合，显著降低 JS 与水合成本。

• SEO：

  • 需要 HTML 才有良好 SEO，因此通常用 SSR（或预渲染）保证初次可见 HTML；RSC 单独并不自动提供 HTML。

• 数据获取：

  • 仅 SSR：常见模式是服务器拉数据、把数据“注入”到页面，再把组件代码与状态下发到浏览器。
  • RSC：把数据获取放在服务器组件里，天然避免在浏览器暴露敏感逻辑，消除多余的 JSON“中间层”。

四、典型用法建议

• 同时启用 RSC 与 SSR（主流框架的默认选择），得到：

  • 快速首屏（SSR/流式 SSR）。
  • 更少的客户端 JS（服务器组件不下发）。
  • 更顺畅的页面内导航（仅拉取 RSC 流）。

• 何时写服务器组件：

  • 需要访问数据库、调用后端、处理大数据、或引入重量级库但结果只用于渲染、不需要在浏览器交互。

• 何时写客户端组件：

  • 需要浏览器 API、事件交互、可变本地状态、动画、可控输入等。

五、常见误解澄清

• “RSC 取代 SSR”：不准确。RSC 解决的是“执行与分发”的问题，SSR 解决的是“首屏 HTML”的问题。最佳实践是协同使用。
• “用了 RSC 就不需要水合了”：不准确。只是在 RSC 下，水合范围缩小到“客户端组件”边界，整体水合成本会降低，但并非没有水合。
• “RSC 一定更快”：通常更省 JS、更顺滑，但仍取决于网络、缓存、渲染切分与框架配置；不当的边界划分或缓存策略也会拖慢性能。

总结

• SSR 提供服务端产出 HTML 的能力，确保首屏性能与 SEO。
• RSC 提供在服务器执行组件与数据获取、减少客户端 JS 与水合成本的能力。
• 在 Next.js 等现代框架中，它们被整合为同一条渲染流水线：用 SSR 保障可见性与可爬取性，用 RSC 降低前端负担并提升交互与数据流效率。两者并行不悖，优势互补。