理解 React Server Components：从概念到实战 – wiki基地

作者： /

理解 React Server Components：从概念到实战

React Server Components (RSCs) 是 React 团队推出的一项颠覆性功能，旨在将服务器端渲染 (SSR) 和客户端渲染 (CSR) 的优势结合起来，为开发者提供更高效、性能更优的 Web 应用构建方式。本文将深入探讨 RSC 的核心概念、工作原理，并通过实际案例展示其应用。

什么是 React Server Components？

传统上，React 应用要么是纯客户端渲染 (CSR)，所有 JavaScript 都在浏览器中执行；要么是服务器端渲染 (SSR)，页面在服务器上生成 HTML 后发送给客户端。RSC 引入了第三种模型：在服务器上渲染组件，但最终它们仍然是交互式的，并且不需要客户端 JavaScript 包来渲染。

核心思想是将组件分为两种类型：

  1. Server Components (服务器组件):

    • 在服务器上渲染。
    • 可以访问后端数据源（数据库、文件系统、微服务等），无需 API 调用。
    • 不包含交互性（例如 useState、useEffect）。
    • 不打包到客户端 JavaScript bundle 中，从而减小客户端负载。
    • 渲染结果（通常是轻量级的自定义数据格式，而不是 HTML）被发送到客户端，由客户端的 React 运行时进行协调和渲染。
    • 文件名通常以 .server.js 或 .server.tsx 结尾（具体约定取决于框架）。

  2. Client Components (客户端组件):

    • 在客户端渲染，与我们熟悉的传统 React 组件相同。
    • 可以包含交互性 (hooks)。
    • 打包到客户端 JavaScript bundle 中。
    • 可以通过 use client 指令明确标记。
    • 文件名通常以 .client.js 或 .client.tsx 结尾，或者不带特定后缀。

一个关键的洞察是：Server Components 可以导入并渲染 Client Components，但 Client Components 不能直接导入 Server Components。 如果 Client Component 需要使用 Server Component 渲染的内容，Server Component 必须将该内容作为 props 传递给 Client Component。

为什么需要 React Server Components？

RSC 解决了传统 Web 应用开发的几个痛点：

  1. 减少客户端 JavaScript 包大小： 服务器组件不发送其 JavaScript 代码到客户端，显著减少了客户端需要下载和解析的代码量，提升了首次加载性能。
  2. 更接近数据源： 服务器组件可以直接访问数据库或文件系统，避免了客户端-服务器之间的额外网络往返，从而简化了数据获取逻辑，并可能提高数据获取速度。
  3. 安全性增强： 敏感信息（如 API 密钥、数据库凭证）可以安全地保留在服务器上，不会暴露给客户端。
  4. 更快的开发迭代： 可以在服务器上进行更多的工作，避免了在客户端和服务器之间切换上下文，简化了开发流程。
  5. 更好的用户体验： 页面内容可以更快地呈现，因为许多渲染工作在服务器上完成，减少了客户端的白屏时间。

工作原理简述

当用户请求一个页面时，RSC 的工作流程大致如下：

  1. 请求到达服务器： 服务器接收到请求。
  2. 服务器渲染 Server Components： 服务器开始渲染构成页面的 Server Components。这些组件可以直接从数据源获取数据，生成一个轻量级的组件树表示（不是 HTML）。
  3. Client Components 占位符： 如果 Server Component 内部渲染了一个 Client Component，服务器会将其作为占位符处理，并将其所需 props 序列化。
  4. 流式传输到客户端： 服务器将 Server Components 的渲染结果（以及 Client Components 的占位符和 props）以流的形式发送到客户端。
  5. 客户端 React 运行时协调： 客户端的 React 运行时接收到这些数据，并协调这些组件的渲染。对于 Client Components 的占位符，它会等待相应的客户端 JavaScript 代码加载并水合 (hydrate)，使其变为交互式。
  6. 交互性： 一旦客户端组件完成水合，整个页面就变得完全交互式。

实战：Next.js 中的 React Server Components

Next.js 13 及更高版本将 RSC 作为其 App Router 的核心特性。以下是 Next.js 中 RSC 的一个简单实战示例：

假设我们有一个产品列表页面。

app/page.tsx (默认是 Server Component)

“`tsx
// app/page.tsx
import ProductList from ‘../components/ProductList’;
import AddToCartButton from ‘../components/AddToCartButton’; // 这是客户端组件

async function getProducts() {
// 这在服务器上运行，可以直接访问数据库或文件系统
// 模拟数据库查询
const products = await new Promise(resolve =>
setTimeout(() =>
resolve([
{ id: 1, name: ‘Product A’, price: 29.99 },
{ id: 2, name: ‘Product B’, price: 49.99 },
]),
1000)
);
return products;
}

export default async function HomePage() {
const products = await getProducts(); // 在服务器上获取数据

return (

我们的产品


{/ 这是一个客户端组件，但在服务器组件中渲染 /}

);
}
“`

components/ProductList.tsx (Server Component)

“`tsx
// components/ProductList.tsx
// 默认情况下，在 Next.js App Router 中，组件是 Server Components
interface Product {
id: number;
name: string;
price: number;
}

interface ProductListProps {
products: Product[];
}

export default function ProductList({ products }: ProductListProps) {
return (

    {products.map(product => (

  • {product.name} – ${product.price}

    • ))}

);
}
“`

components/AddToCartButton.tsx (Client Component)

“`tsx
// components/AddToCartButton.tsx
‘use client’; // <– 这行指令明确声明这是一个客户端组件

import { useState } from ‘react’;

interface AddToCartButtonProps {
productId: number;
}

export default function AddToCartButton({ productId }: AddToCartButtonProps) {
const [quantity, setQuantity] = useState(0);

const handleAddToCart = () => {
setQuantity(q => q + 1);
console.log(Adding product ${productId} to cart. Quantity: ${quantity + 1});
// 这里可以发起 API 请求到后端实际添加到购物车
};

return (

);
}
“`

在这个例子中：

  • HomePage 和 ProductList 是 Server Components。它们在服务器上渲染，HomePage 负责获取产品数据。它们的 JavaScript 不会发送到客户端。
  • AddToCartButton 是一个 Client Component，因为它使用了 useState hook 并且有交互性。'use client' 指令告诉 Next.js 这是一个客户端组件，它的 JavaScript 将被打包并发送到浏览器。
  • Server Component HomePage 渲染了 Client Component AddToCartButton，并向其传递了 productId prop。

RSC 的局限性和注意事项

尽管 RSC 带来了显著优势，但也并非没有局限性：

  • 没有 Hooks (Server Components): 服务器组件不能使用 useState、useEffect 等客户端 Hooks。它们是无状态的。
  • 没有浏览器 API (Server Components): 服务器组件不能直接访问 window、document 等浏览器特有的全局对象。
  • Client Components 不能导入 Server Components： 这是一个单向依赖。如果需要共享代码，通常需要将共享逻辑抽象为独立的模块，或者通过 props 传递内容。
  • 学习曲线： 区分 Server Components 和 Client Components 的心智模型需要时间适应。
  • 构建复杂性： 引入 RSC 后，构建系统需要处理 Server Components 和 Client Components 的不同打包和渲染策略。

总结

React Server Components 代表了 React 渲染范式的一个重大转变。通过在服务器上完成更多的渲染工作并减少客户端 JavaScript 负载，RSC 为构建高性能、高效率和安全可靠的 Web 应用提供了强大的新工具。理解其核心概念、工作原理以及在框架（如 Next.js）中的应用，将使开发者能够更好地利用这一技术，为用户提供卓越的体验。随着生态系统的不断成熟，RSC 必将成为现代 React 开发中不可或缺的一部分。

滚动至顶部