React Server Components 与 GraphQL 优化的权威指南：你需要了解的内容

Source: Dev.to

什么是 React Server Components 和 GraphQL？

React Server Components（React 18 引入）是仅在服务器上渲染的组件，客户端不产生任何 JavaScript 代码。它们允许你在组件代码中直接获取数据，安全地访问后端资源（数据库、API），并在内容准备好时将渲染结果流式传输到客户端。

GraphQL 是一种用于 API 的查询语言，客户端可以精确请求所需的数据，避免了数据的过度获取或不足获取。它可以与任何客户端或服务器框架配合使用，常通过 Apollo Client 或 Relay 等库与 React 结合。

两种技术的核心优化领域

在深入细节之前，以下三个共享的优化优先级适用于 RSC 和 GraphQL 实现：

• 最小化负载大小 – 减少网络传输的数据量。
• 缓存效率 – 重用已获取的数据，以避免冗余请求。
• 渲染性能 – 削减不必要的重新渲染和客户端计算。

Source: …

优化 React 服务器组件

RSC 的核心优化优势在于将工作从客户端转移到服务器端。关键策略包括：

1. 服务器端数据获取

RSC 可以在渲染期间直接从数据库或内部 API 获取数据，无需客户端的 fetch 调用。这消除了客户端的瀑布式请求（阻塞渲染的顺序数据获取），并减少了总往返次数。例如：

// Server Component
async function UserProfile({ userId }) {
  const user = await db.users.findUnique({ where: { id: userId } });
  return {user.name};
}

2. 流式传输和选择性水合

RSC 支持在组件处理完成后将渲染输出流式传输到客户端，即使某些数据获取较慢。结合选择性水合（仅对需要交互的客户端组件进行水合），可以缩短首屏内容绘制时间（TTFB）并提升感知性能。

3. 静态内容零客户端 JS

服务器组件从不发送客户端 JavaScript，因此大部分为静态或服务器渲染内容的页面拥有更小的包体积。这对内容丰富的网站或低性能设备尤为有益。

4. 内置缓存用于服务器获取

类似 Next.js（完整支持 RSC）的框架允许你为服务器组件的数据获取添加缓存头，或使用 React 的实验性 cache() 函数在单次渲染过程中去重重复的数据请求。

Source: …

优化 GraphQL

GraphQL 的优化侧重于让客户端精确控制数据请求，并配合强大的缓存机制。关键策略包括：

1. 消除 Over‑Fetching

客户端只请求所需的字段，因此仅需要用户姓名和头像的组件不会获取整个用户对象。这大幅降低了复杂 API 的负载大小。

2. 客户端缓存

Apollo Client 和 Relay 等库维护归一化的客户端缓存，能够自动去重请求并在执行 mutation 时更新缓存数据。这减少了冗余的网络请求，加快后续渲染速度。

3. 持久化查询（Persisted Queries）

持久化查询将 GraphQL 查询字符串映射到唯一的 ID，客户端只发送 ID 而不是完整的查询文本。这样可以减小请求体积，并让服务器对已批准的查询进行白名单管理，以提升安全性。

4. 批处理与去重

GraphQL 客户端可以将多个查询合并为一次网络请求，减少往返次数。同时，它们会去重相同的进行中请求，避免重复工作。

5. 服务器端缓存

GraphQL 服务器可以在 resolver 层缓存查询结果，或使用 Apollo Server 的缓存插件，根据查询结构和变量对响应进行缓存。

RSC vs GraphQL: Head‑to‑Head Optimization Comparison

何时使用哪种？

使用 React Server Components 的情况：

• 您正在构建内容丰富且交互性较少的网站。
• 您想要减少客户端 bundle 大小和计算量。
• 您使用的框架如 Next.js 完全支持 RSC。

使用 GraphQL 的情况：

• 您有多个客户端（网页、移动端、第三方）共享同一 API。
• 您需要灵活、由客户端驱动的数据请求。
• 您已经有一个 REST API，想要逐步迁移。

您也可以将它们结合使用： 使用 RSC 渲染静态或服务器获取的内容，and Gra… (content truncated in the original source).

结论

React Server Components 和 GraphQL 都提供强大的优化能力，但适用于不同的使用场景。RSC 将工作转移到服务器以减轻客户端负担，而 GraphQL 让客户端能够精确控制数据以减少过度获取。评估你的应用需求、团队专长和现有基础设施，以选择合适的方案——或两者结合以实现最佳性能。