2026年掌握React服务端组件

React服务端组件（RSC）从根本上改变了我们构建React应用程序的方式。通过将渲染逻辑移动到服务端，我们可以显著减少发送到客户端的JavaScript包，从而实现更快的加载时间和更好的用户体验。在这篇文章中，我们将探讨在2026年利用RSC的高级模式和最佳实践。

什么是服务端组件？

传统上，React组件完全在客户端渲染（CSR），或者在服务端预渲染为HTML（SSR），然后在客户端进行水合。服务端组件允许我们专门在服务端由于渲染组件。它们的代码通过不会发送到浏览器。

好处

1. 零包大小：服务端组件中使用的依赖项（如markdown解析器或繁重的日期库）保留在服务端。
2. 直接后端访问：您可以直接在组件内部查询数据库，而无需暴露API端点。
3. 自动代码分割：服务端导入的客户端组件会自动进行代码分割。

数据获取模式

使用RSC，您可以将组件设为 async 并直接等待数据。

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>用户</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

用于流式传输的 Suspense

由于数据获取可能很慢，请将您的组件包装在 <Suspense> 中，以便在加载数据时立即显示回退UI。

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>我的用户</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

混合服务端和客户端组件

最令人困惑的方面之一是如何结合服务端和客户端组件。

经验法则：服务端组件可以导入客户端组件。客户端组件不能直接导入服务端组件。但是，您可以将服务端组件作为 children 传递给客户端组件。

"Children" 模式

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      计数：{count}
      {children} {/*这可能是服务端组件！*/}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* 这完美运行 */}
    </ClientWrapper>
  );
}

常见陷阱

1. 在服务端组件中使用Context：Context是一个客户端概念。如果您需要在服务端共享数据，请将其作为props传递或使用专门的请求范围缓存。
2. 添加事件处理程序：您不能向服务端组件添加 onClick 或 onChange。该逻辑属于通用的客户端组件叶节点。

结论

React服务端组件不仅仅是一个功能；它们是一个范式转变。通过理解服务端和客户端之间的边界，您可以构建既具有高度交互性又极其快速的应用程序。