高性能React开发React Server Components详解

// 传统客户端组件示例
function ProductPage({ id }) {
  const [product, setProduct] = useState(null);
  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(setProduct);
  }, [id]);
  if (!product) return <Loading />;
  return (
    <div>
      <ProductDetails product={product} />
      <RelatedProducts category={product.category} />
    </div>
  );
}

// Server Component (.server.js)
import db from 'server/db';
export default async function ProductPage({ id }) {
  const product = await db.products.findUnique({ where: { id } });
  const related = await db.products.findMany({
    where: { category: product.category }
  });
  return (
    <div>
      <ProductDetails product={product} />
      <section>
        <h2>相关商品</h2>
        <RelatedProducts items={related} />
      </section>
      <ProductReviews client:load />
    </div>
  );
}
// Client Component (.client.js)
'use client';
export function ProductReviews({ productId }) {
  const [reviews, setReviews] = useState([]);
  useEffect(() => {
    fetchReviews(productId).then(setReviews);
  }, [productId]);
  return <ReviewList items={reviews} />;
}

// 带缓存的Server Component
import { unstable_cache } from 'react';
const getProduct = unstable_cache(
  async (id) => {
    const res = await db.products.findUnique({ where: { id }});
    return res;
  },
  ['product'],
  { tags: ['products'], revalidate: 3600 }
);
export default async function CachedProductPage({ id }) {
  const product = await getProduct(id);
  // ...
}

// 渐进式Hydration示例
<Suspense fallback={<Skeleton />}>
  <Comments client:load="visible" />
</Suspense>

// 并行数据请求示例
async function DashboardPage() {
  const [user, orders] = await Promise.all([
    fetchUser(),
    fetchOrders()
  ]);
  return (
    <div>
      <WelcomeBanner user={user} />
      <OrderList items={orders} />
    </div>
  );
}

bar
    title 页面加载时间对比(ms)
    CSR : 4200
    SSR : 2800
    RSC : 1200

journey
    title 技术演进路径
    section 传统开发
        CSR --> SSR --> SSG
    section 现代演进
        RSC --> 边缘组件 --> 智能组件