1
React 组件类型
2
├── Server Component（服务端组件）
3
│   ├── 运行环境：服务器 / 边缘节点
4
│   ├── 能力：数据获取、服务端资源访问
5
│   └── 限制：不能使用 useState/useEffect
6
│
7
├── Client Component（客户端组件）
8
│   ├── 运行环境：浏览器
9
│   ├── 能力：状态管理、交互逻辑
10
│   └── 要求：顶部声明 "use client"
11
│
12
└── Shared Component（共享组件）
13
    ├── 运行环境：双端均可
14
    ├── 能力：无状态 UI 渲染
15
    └── 限制：遵守双端约束

1
// app/posts/page.tsx (服务端组件)
2
// 直接访问数据库，无需 API 层
3
async function PostsPage() {
4
  const posts = await db.posts.findMany({
5
    orderBy: { createdAt: 'desc' },
6
    take: 20
7
  });
8

9
  return (
10
    <main>
11
      <h1>最新文章</h1>
12
      {/* Server Components 直接传递数据给 Client Components */}
13
      <PostsList posts={posts} />
14
      {/* 客户端交互组件 */}
15
      <CreatePostForm />
16
    </main>
17
  );
18
}

1
// app/components/CreatePostForm.tsx (客户端组件)
2
'use client';
3

4
import { useState } from 'react';
5

6
export function CreatePostForm() {
7
  const [title, setTitle] = useState('');
8

9
  const handleSubmit = async (e: FormEvent) => {
10
    e.preventDefault();
11
    // Server Actions - 直接调用服务端函数
12
    await createPost({ title });
13
  };
14

15
  return (
16
    <form onSubmit={handleSubmit}>
17
      <input
18
        value={title}
19
        onChange={(e) => setTitle(e.title.value)}
20
        placeholder="文章标题"
21
      />
22
      <button type="submit">发布</button>
23
    </form>
24
  );
25
}

1
import { useActionState } from 'react';
2

3
function ContactForm() {
4
  const [state, formAction] = useActionState(submitContactForm, null);
5

6
  return (
7
    <form action={formAction}>
8
      <input name="email" type="email" required />
9
      <textarea name="message" required />
10
      <button type="submit">发送</button>
11
      {state?.success && <p>发送成功！</p>}
12
      {state?.error && <p>发送失败：{state.error}</p>}
13
    </form>
14
  );
15
}

1
import { useFormStatus } from 'react-dom';
2

3
function SubmitButton() {
4
  const { pending } = useFormStatus();
5

6
  return (
7
    <button type="submit" disabled={pending}>
8
      {pending ? '发送中...' : '发送'}
9
    </button>
10
  );
11
}

1
import { useOptimistic } from 'react';
2

3
function LikeButton({ postId, initialLikes }) {
4
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
5
    initialLikes
6
  );
7

8
  const handleLike = async () => {
9
    // 立即更新 UI
10
    setOptimisticLikes(prev => prev + 1);
11
    // 后台发送请求
12
    await likePost(postId);
13
  };
14

15
  return (
16
    <button onClick={handleLike}>
17
      👍 {optimisticLikes}
18
    </button>
19
  );
20
}

1
import { use } from 'react';
2

3
function UserProfile({ userPromise }) {
4
  const user = use(userPromise);
5

6
  return (
7
    <div>
8
      <h2>{user.name}</h2>
9
      <p>{user.bio}</p>
10
    </div>
11
  );
12
}

1
// 无需任何配置，编译器自动优化
2
function UserList({ users }) {
3
  // 不需要 useMemo
4
  const sortedUsers = users.sort((a, b) => a.name.localeCompare(b.name));
5

6
  // 不需要 useCallback
7
  const handleClick = (user) => {
8
    console.log('Clicked:', user.name);
9
  };
10

11
  return (
12
    <ul>
13
      {sortedUsers.map(user => (
14
        <li key={user.id} onClick={() => handleClick(user)}>
15
          {user.name}
16
        </li>
17
      ))}
18
    </ul>
19
  );
20
}

1
'use server';
2

3
// ✅ 好的做法：显式权限检查
4
export async function deleteUser(userId: string) {
5
  const user = await getCurrentUser();
6
  if (!user.isAdmin) {
7
    throw new Error('Unauthorized');
8
  }
9

10
  // 输入校验
11
  if (!userId || typeof userId !== 'string') {
12
    throw new Error('Invalid userId');
13
  }
14

15
  await db.user.delete({ where: { id: userId } });
16
  revalidatePath('/users');
17
}
18

19
// ❌ 危险的做法：无权限检查
20
export async function deleteUser(userId: string) {
21
  await db.user.delete({ where: { id: userId } });
22
}