React Server Components：彻底改变前端渲染模式

// app/posts/page.tsx - Server Component，直接获取数据
async function PostsPage() {
  // 在 Server Component 中可以直接 async/await
  const posts = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // ISR：每小时重新验证
  }).then(res => res.json());

  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <ShareButton postId={post.id} />
        </article>
      ))}
    </main>
  );
}

// app/dashboard/page.tsx - Client Component
'use client';

import { useState, useEffect } from 'react';

export default function DashboardPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 客户端仍需通过 API 获取数据
    fetch('/api/dashboard').then(res => res.json()).then(setData);
  }, []);

  if (!data) return <LoadingSkeleton />;
  return <DashboardChart data={data} />;
}

// app/page.tsx
import { Suspense } from 'react';

export default function HomePage() {
  return (
    <main>
      <HeroSection /> {/* 立即渲染 */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductList /> {/* 流式加载 */}
      </Suspense>
      <Suspense fallback={<ReviewSkeleton />}>
        <ReviewSection /> {/* 流式加载 */}
      </Suspense>
    </main>
  );
}

// components/ProductList.tsx
async function ProductList() {
  const products = await fetchProducts(); // 可能耗时
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  );
}

// 将组件分为三类：
// 1. 纯展示 → Server Component（默认）
// 2. 有交互 → Client Component（加 'use client'）
// 3. 混合 → 拆分为 Server + Client

// Before: 一个大组件包含展示和交互
function Article({ article }) {
  const [comment, setComment] = useState('');
  return (
    <div>
      <h1>{article.title}</h1>
      <div>{article.content}</div>
      <input value={comment} onChange={e => setComment(e.target.value)} />
      <button onClick={() => submitComment(comment)}>提交</button>
    </div>
  );
}

// After: 拆分为 Server + Client
// ArticleContent.tsx (Server Component)
export default function ArticleContent({ article }) {
  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={"{ __html: article.htmlContent }"} />
      {/* markdown 渲染库不会发送到客户端 */}
      <CommentForm articleId={article.id} />
    </article>
  );
}

// CommentForm.tsx (Client Component)
'use client';
export default function CommentForm({ articleId }) {
  const [comment, setComment] = useState('');
  return (
    <form>
      <textarea value={comment} onChange={e => setComment(e.target.value)} />
      <button onClick={() => submitComment(articleId, comment)}>提交</button>
    </form>
  );
}

// Pages Router: getServerSideProps
export async function getServerSideProps(context) {
  const data = await fetchData(context.params.id);
  return { props: { data } };
}

// App Router: 直接在 Server Component 中 async
export default async function Page({ params }) {
  const data = await fetchData(params.id);
  return <DataView data={data} />;
}

// 对于跨组件共享状态，使用 URL searchParams 而非全局 state
// Server Component 可以直接读取 searchParams

// app/search/page.tsx
export default async function SearchPage({ searchParams }) {
  const query = searchParams.q || '';
  const results = await searchProducts(query);
  return (
    <div>
      <SearchInput defaultValue={query} />
      <SearchResults results={results} />
    </div>
  );
}

// 错误：Server Component 不能使用 window/document
export default function Page() {
  const width = window.innerWidth; // ReferenceError!
  return <div>{width}</div>;
}

// 正确：在 Client Component 中使用
'use client';
import { useState, useEffect } from 'react';
export default function WindowSize() {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
    window.addEventListener('resize', () => setWidth(window.innerWidth));
  }, []);
  return <span>{width}px</span>;
}

// 错误：函数无法序列化
<ServerComponent onClick={() => {}} /> // TypeError!

// 正确：通过 children 传递 Client Component
<ServerComponent>
  <ClientButton onClick={() => {}} />
</ServerComponent>

// 反模式：整个页面标记为 Client Component
'use client';
export default function Page() {
  // 这个页面其实大部分是静态内容
  // 只有搜索框需要交互
  return <div>...大量静态内容...</div>;
}

// 推荐：只给交互部分加 'use client'
// page.tsx (Server Component)
export default function Page() {
  return <div>...静态内容...<SearchBox /></div>;
}

// SearchBox.tsx (Client Component)
'use client';
export default function SearchBox() { ... }