React Server Components 入门：在服务端取数、把客户端组件留在边界

为什么需要 React Server Components

传统的客户端渲染（CSR）要在浏览器里下载 JS、再发请求取数、最后渲染。对数据强依赖的页面，首屏会出现明显的白屏与加载态。React Server Components（RSC）让组件可以只在服务端运行，直接读数据库或调内部服务，把结果以流式 HTML 发到浏览器，组件代码本身不进入前端包体。

服务端组件默认在服务端执行

在支持 RSC 的框架（如 Next.js App Router）里，没有 "use client" 指令的文件就是服务端组件。它可以是 async 函数，直接在组件体内 await 数据。

// app/users/page.tsx —— 服务端组件，默认只在服务端执行
import { db } from "@/lib/db";

export default async function UsersPage() {
  // 直接读库，结果不会经过浏览器，也不会打包进前端 bundle
  const users = await db.user.findMany({ take: 20 });

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

用 "use client" 划出客户端边界

需要状态、事件、浏览器 API 的组件要标 "use client"。它的子组件默认也是客户端组件；但客户端组件可以 import 并渲染服务端组件传来的内容（作为 children 或 props），形成服务端包裹客户端的结构。

// components/LikeButton.tsx
"use client";
import { useState } from "react";

export function LikeButton({ initial }: { initial: number }) {
  const [count, setCount] = useState(initial);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      赞 {count}
    </button>
  );
}

在服务端页面里嵌入客户端组件

服务端组件把取到的数据作为 props 传进客户端组件，取数在服务端、交互在客户端，二者各司其职。

// app/posts/[id]/page.tsx
import { db } from "@/lib/db";
import { LikeButton } from "@/components/LikeButton";

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await db.post.findUnique({ where: { id: params.id } });
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton initial={post.likes} />
    </article>
  );
}

常见误区

• 服务端组件不能用 useState、useEffect、onClick 等仅客户端能力，否则构建报错。
• 客户端组件 import 服务端组件时，只能以 children/props 形式传入，不能直接在客户端组件里调用服务端组件函数。
• RSC 不等于 SSR：SSR 是把整个 React 树在服务端渲染成 HTML 再注水；RSC 让部分组件根本不进前端包体，二者可以叠加使用。