React Server Components基础示例

下面是一个 React Server Components（RSC）基础示例，展示如何使用 React 18+ 特性，构建一个简单的服务端组件和客户端组件结合的应用。

---

项目结构

/src
  /components
    ServerComponent.jsx
    ClientComponent.jsx
  App.jsx
  index.jsx

---

1. ServerComponent.jsx （服务端组件）

这是纯服务端渲染的组件，不能使用客户端 hook（如 useState、useEffect）。

// src/components/ServerComponent.jsx
import React from 'react';

// 这是一个服务端组件，直接返回 JSX
export default function ServerComponent() {
  const data = "这是来自服务端的数据";

  return (
    <div>
      <h2>服务端组件</h2>
      <p>{data}</p>
    </div>
  );
}

---

2. ClientComponent.jsx （客户端组件）

这个组件必须加上 "use client"; 指令，并且可以使用 React 客户端特性。

// src/compone