React Server Components 深度解析

// 服务器组件示例 (默认)
// app/users/page.tsx
async function UsersPage() {
  // 直接访问数据库，无需 API
  const users = await db.users.findMany({
    select: { id: true, name: true, email: true }
  });
  
  return (
    <div>
      <h1>Users List</h1>
      <UserList users={users} />
    </div>
  );
}

// 服务器组件中的数据获取
async function UserProfile({ userId }) {
  // 并行获取多个数据源
  const [user, posts, followers] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId),
    fetchFollowers(userId)
  ]);
  
  return (
    <div>
      <UserHeader user={user} />
      <Suspense fallback={<PostsSkeleton />}>
        <PostsList posts={posts} />
      </Suspense>
      <FollowersList followers={followers} />
    </div>
  );
}

// 客户端组件
'use client';

import { useState } from 'react';

function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [isLiked, setIsLiked] = useState(false);
  
  const handleLike = async () => {
    const newLikedState = !isLiked;
    setIsLiked(newLikedState);
    setLikes(prev => newLikedState ? prev + 1 : prev - 1);
    
    // 调用 API 更新服务器状态
    await fetch(`/api/posts/${postId}/like`, {
      method: newLikedState ? 'POST' : 'DELETE'
    });
  };
  
  return (
    <button onClick={handleLike}>
      {isLiked ? '❤️' : '🤍'} {likes}
    </button>
  );
}

// 服务器组件传递 props 给客户端组件
async function PostCard({ postId }) {
  const post = await fetchPost(postId);
  
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      {/* 传递序列化数据给客户端组件 */}
      <LikeButton postId={post.id} initialLikes={post.likes} />
    </article>
  );
}

// 服务器组件传递 children 给客户端组件
// components/ClientWrapper.tsx
'use client';

import { useState } from 'react';

export function ExpandableSection({ children, title }) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
    <div className="expandable-section">
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {title} {isExpanded ? '−' : '+'}
      </button>
      {isExpanded && <div className="content">{children}</div>}
    </div>
  );
}

// app/page.tsx (服务器组件)
import { ExpandableSection } from '@/components/ClientWrapper';

async function Page() {
  const data = await fetchData();
  
  return (
    <div>
      {/* 服务器组件内容作为 children 传递给客户端组件 */}
      <ExpandableSection title="Details">
        <ServerRenderedContent data={data} />
      </ExpandableSection>
    </div>
  );
}

// 流式渲染与 Suspense
async function StreamingPage() {
  return (
    <div>
      <h1>Dashboard</h1>
      
      {/* 快速加载的内容 */}
      <QuickStats />
      
      {/* 流式加载的内容 */}
      <Suspense fallback={<ChartSkeleton />}>
        <SlowChart />
      </Suspense>
      
      <Suspense fallback={<TableSkeleton />}>
        <DataTable />
      </Suspense>
    </div>
  );
}

// 服务器组件中的错误处理
async function SafeDataFetch({ userId }) {
  try {
    const user = await fetchUser(userId);
    return <UserProfile user={user} />;
  } catch (error) {
    // 错误会冒泡到最近的 Error Boundary
    throw new Error('Failed to load user');
  }
}

// 错误边界组件
'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);
  
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

// 服务器操作 (Server Actions)
async function updateProfile(formData) {
  'use server';
  
  const userId = formData.get('userId');
  const name = formData.get('name');
  
  await db.users.update({
    where: { id: userId },
    data: { name }
  });
  
  revalidatePath('/profile');
}

// 在服务器组件中使用 Server Action
async function ProfileForm({ user }) {
  return (
    <form action={updateProfile}>
      <input type="hidden" name="userId" value={user.id} />
      <input type="text" name="name" defaultValue={user.name} />
      <button type="submit">Update</button>
    </form>
  );
}

// 混合使用服务器和客户端组件的最佳实践
// app/layout.tsx
import { Navbar } from '@/components/Navbar';
import { Sidebar } from '@/components/Sidebar';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {/* 静态布局 - 服务器组件 */}
        <Navbar />
        <div className="flex">
          <Sidebar />
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}

// components/Navbar.tsx
'use client';

import { useState } from 'react';

export function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  
  return (
    <nav>
      <button onClick={() => setIsMenuOpen(!isMenuOpen)}>
        Menu
      </button>
      {isMenuOpen && <MobileMenu />}
    </nav>
  );
}