React Server Components 深度解析：服务端渲染边界、流式传输与混合架构

// app/dashboard/page.tsx — Server Component（默认，不需要 "use server"）
import { prisma } from '@/lib/prisma';
import { UserCard } from './UserCard'; // Client Component

export default async function DashboardPage() {
  // 直接访问数据库
  const user = await prisma.user.findUnique({
    where: { id: '123' },
    include: { posts: { take: 5 } },
  });

  return (
    <main>
      <h1>Dashboard</h1>
      {/* 传递数据给 Client Component */}
      <UserCard user={user} />
    </main>
  );
}

// app/dashboard/UserCard.tsx — Client Component（需要交互）
'use client';

import { useState } from 'react';

export function UserCard({ user }) {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={() => setShowDetails(!showDetails)}>
        {showDetails ? 'Hide' : 'Show'} Details
      </button>
      {showDetails && <p>{user.email}</p>}
    </div>
  );
}

// Server Component 中直接 await 异步数据
import { Suspense } from 'react';
import { PostList } from './PostList';
import { Comments } from './Comments';

export default async function PostPage({ params }: { params: { id: string } }) {
  // 主数据可以直接 await（阻塞渲染直到数据就绪）
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* 次要数据用 Suspense 包裹，实现流式传输 */}
      <Suspense fallback={<div>Loading comments...</div>}>
        <Comments postId={params.id} />
      </Suspense>
    </article>
  );
}

// Comments.tsx — 可以是另一个 Server Component
async function Comments({ postId }: { postId: string }) {
  const comments = await fetch(`https://api.example.com/posts/${postId}/comments`, {
    next: { revalidate: 60 }, // ISR
  }).then(r => r.json());

  return (
    <ul>
      {comments.map(c => <li key={c.id}>{c.text}</li>)}
    </ul>
  );
}

// ❌ 串行获取（慢）
const user = await fetchUser();
const posts = await fetchPosts(user.id); // 等待 user 返回
const stats = await fetchStats(user.id); // 等待 posts 返回

// ✅ 并行获取（快）
const [user, globalStats] = await Promise.all([
  fetchUser(),
  fetchGlobalStats(),
]);

// 依赖 user.id 的再并行
const [posts, stats] = await Promise.all([
  fetchPosts(user.id),
  fetchStats(user.id),
]);

// app/actions.ts
'use server'; // 标记文件中所有导出为 Server Actions

import { revalidatePath } from 'next/cache';
import { prisma } from '@/lib/prisma';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  await prisma.post.create({
    data: { title, content },
  });

  revalidatePath('/posts'); // 让 ISR 页面重新生成
}

export async function deletePost(id: string) {
  await prisma.post.delete({ where: { id } });
  revalidatePath('/posts');
}

// app/posts/page.tsx — Server Component
import { createPost } from './actions';

export default async function PostsPage() {
  const posts = await prisma.post.findMany();

  return (
    <div>
      <form action={createPost}>
        <input name="title" placeholder="Title" />
        <textarea name="content" placeholder="Content" />
        <button type="submit">Create Post</button>
      </form>

      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.title}
            <DeleteButton id={post.id} />
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/posts/DeleteButton.tsx — Client Component
'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={async () => {
      if (confirm('Delete?')) await deletePost(id);
    }}>
      Delete
    </button>
  );
}

// ❌ 错误
async function Page() {
  const [state, setState] = useState(0); // Server Component 不能用 Hook！
  return <div>{state}</div>;
}

// ✅ 如果需要状态，拆分为 Client Component
'use client';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// ❌ 不需要 "use client" 的组件
'use client'; // 没必要！
function StaticCard({ title, description }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

// ✅ 删除 "use client"，让它成为 Server Component
function StaticCard({ title, description }) { ... }

// ❌ Client Component 不能直接 import Server Component
'use client';
import { ServerCard } from './ServerCard'; // 错误！

// ✅ 方案：通过 props 传递 Server Component 的渲染结果
function ClientWrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

// page.tsx（Server Component）
import ClientWrapper from './ClientWrapper';
import ServerCard from './ServerCard';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerCard /> {/* ✅ 在 Server Component 中渲染 */}
    </ClientWrapper>
  );
}