React 19.1 和 Next.js 15.3.2 发布，React Server Components（RSC）成为 React 生态系统和 Next.js 框架的稳定部分。本文介绍了服务器组件的相关内容，包括其架构、数据加载与缓存、与 Next.js 的集成（新的app/路由、use client指令、布局）、局限性和陷阱等，并与 Remix、Astro 等其他框架进行了比较。

为什么需要服务器组件？

• 传统 React 应用的客户端渲染（CSR）会使浏览器负载过重，服务器渲染（SSR）仍需在客户端进行交互组件的完全水化，而 RSC 可将部分 UI 逻辑和渲染移至服务器，发送预渲染的 HTML 到浏览器，仅在需要的地方添加交互性，从而改善性能和加载时间、减少包大小、提高安全性。
• RSC 保留了 React 的声明式和模块化特性，可让开发者决定每个 UI 片段在服务器或浏览器上执行，兼具传统服务器渲染的性能和 React 的交互性。

React 服务器组件的架构

• 服务器组件是在服务器（或构建时）执行的 React 组件，默认所有组件都是服务器组件，除非用'use client'标记为客户端组件。
• React 构建两个独立的模块图，服务器组件可导入其他服务器或客户端组件，但客户端组件不能导入服务器组件，形成嵌套树结构，服务器组件的 HTML 流在加载时发送到浏览器，客户端组件的水化与服务器渲染并行进行。
• 服务器组件不能替代传统客户端组件，应根据需求合理使用，理想情况下，服务器组件用于重渲染和数据工作，客户端组件用于本地交互。

底层原理

• 构建工具将代码分为服务器组件和客户端组件两部分，服务器组件的代码在渲染时转换为序列化的 JSON 流或自定义格式，在客户端重建组件树，服务器组件可以是异步函数，可直接在其中使用await获取数据。
• 但不能在服务器组件中使用useEffect、useState等客户端钩子，也不能访问document或window。

与 Next.js 的集成：App Router、布局和客户端/服务器拆分

• Next.js 是使用服务器组件的最便捷框架，13 版引入新的 App Router（基于app/目录），默认所有组件为服务器组件，需用'use client'标记为客户端组件。
• App Router 的项目结构支持新的理念，app/文件夹内可嵌套目录，每个目录包含page.jsx（服务器组件）和layout.jsx（布局服务器组件），布局可在导航时高效复用，隔离稳定的 UI 部分到服务器渲染的布局中以优化性能。
• 客户端组件不能包含服务器组件，服务器组件可渲染客户端组件，Next.js 严格执行此边界。

数据加载与缓存

• RSC 引入后，数据获取方式发生变化，在 Next.js App Router 中，用fetch()直接在服务器组件中获取数据，默认fetch请求不自动缓存，需显式设置缓存策略，如fetch(url, { cache: 'force-cache' })或fetch(url, { next: { revalidate: 60 } })。
• Next.js 提供unstable_cache用于缓存异步函数，还可通过revalidateTag和revalidatePath进行缓存失效处理。
• RSC 支持并行数据加载，避免瀑布效应，减少请求延迟，提高页面渲染速度，传统的getServerSideProps和getStaticProps在 App Router 中已过时。

服务器操作：无需 API 的服务器端逻辑

• 服务器操作是为写入数据和处理用户交互而设计的函数，可在客户端组件中直接调用，无需手动创建 API 端点，实现了 RPC 模型。
• 示例中通过定义handleContactSubmission函数处理联系表单提交，在客户端组件中调用，Next.js 自动处理网络请求和结果返回。
• 服务器操作有局限性，如会增加服务器负载、存在延迟等，可通过乐观更新等方式减少影响，Next.js 会自动处理端点生成和安全性等问题。

局限性和注意事项

• 服务器组件不能有副作用或访问浏览器 API，数据必须可序列化，不能将服务器组件导入客户端组件，上下文行为有特定限制，不支持实时更新，会增加服务器负载，可能影响用户体验，调试和日志记录较复杂，部分库可能不兼容。

旧浏览器和环境

• 虽然发送到客户端的 JavaScript 减少，但仍需测试应用在各种浏览器和设备上的兼容性，确保内容在无 JavaScript 时可见。

最佳实践和技巧

• 减少客户端 JavaScript，按责任拆分 UI，避免重复获取数据，组织服务器操作，正确处理错误，在各种条件下测试，编写单元和集成测试，注重安全性，逐步迁移现有代码。

与其他框架的比较

• Remix 与 RSC + Server Actions 类似，但仍使用传统 SSR，而 RSC 更深入地在组件级别工作，Remix 可在提交后流式传输更新的表单数据，Next.js 正在追赶。
• Astro 采用“岛屿架构”，默认服务器渲染大部分内容，与 RSC 类似但不依赖于 React，更像是静态站点生成器，RSC 则在 React 生态系统内实现了类似优化。
• 还有其他竞争者如 Qwik 和 Marco，但 React Server Components 是 React 的原生部分，降低了迁移成本，具有广泛的应用前景。

结论

• React Server Components 是 Web 开发的重大转变，虽有迁移成本，但能带来更快、更轻量的应用，提高用户体验和 SEO，Next.js 15 使 RSC 和服务器操作更稳定，开发者应学习和使用好 RSC，以满足现代 Web 的需求。