需要 useState/useEffect？──是──→ Client Component
         │
         否
         ↓
需要事件处理（onClick 等）？──是──→ Client Component
         │
         否
         ↓
需要浏览器 API？──是──→ Client Component
         │
         否
         ↓
使用仅客户端库？──是──→ Client Component
         │
         否
         ↓
Server Component ✅

// ❌ 不好：整个列表都是 Client
'use client'

export default function ProductList({ products }) {
  const [favorites, setFavorites] = useState([])

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <h3>{product.name}</h3> {/* 静态内容 */}
          <p>{product.description}</p> {/* 静态内容 */}
          <button onClick={() => toggleFavorite(product.id)}>收藏</button>
        </li>
      ))}
    </ul>
  )
}

// ✅ 好：只有交互部分是 Client

// app/products/page.tsx - Server Component
import { FavoriteButton } from '@/components/FavoriteButton'

async function getProducts() {
  return fetch('...').then((r) => r.json())
}

export default async function ProductList() {
  const products = await getProducts()

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <h3>{product.name}</h3> {/* Server */}
          <p>{product.description}</p> {/* Server */}
          <FavoriteButton productId={product.id} /> {/* Client */}
        </li>
      ))}
    </ul>
  )
}

// components/FavoriteButton.tsx - Client Component
'use client'

import { useState } from 'react'

export function FavoriteButton({ productId }: { productId: string }) {
  const [isFavorite, setIsFavorite] = useState(false)

  return (
    <button onClick={() => setIsFavorite(!isFavorite)}>
      {isFavorite ? '❤️' : '🤍'}
    </button>
  )
}

// components/Accordion.tsx - Client Component
'use client'

import { useState, ReactNode } from 'react'

interface AccordionProps {
  title: string
  children: ReactNode
}

export function Accordion({ title, children }: AccordionProps) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="border rounded">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full p-4 text-left font-bold"
      >
        {title} {isOpen ? '▼' : '▶'}
      </button>
      {isOpen && <div className="p-4 border-t">{children}</div>}
    </div>
  )
}

// app/faq/page.tsx - Server Component
import { Accordion } from '@/components/Accordion'

async function getFAQs() {
  return fetch('...').then((r) => r.json())
}

export default async function FAQPage() {
  const faqs = await getFAQs()

  return (
    <div className="space-y-4">
      {faqs.map((faq) => (
        <Accordion key={faq.id} title={faq.question}>
          {/* Server Component 作为 children */}
          <FAQContent content={faq.answer} />
        </Accordion>
      ))}
    </div>
  )
}

// Server Component
function FAQContent({ content }: { content: string }) {
  return <div dangerouslySetInnerHTML={{ __html: content }} />
}

// components/Modal.tsx - Client Component
'use client'

import { useState, ReactNode } from 'react'

interface ModalProps {
  trigger: ReactNode
  header: ReactNode
  content: ReactNode
  footer: ReactNode
}

export function Modal({ trigger, header, content, footer }: ModalProps) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <div onClick={() => setIsOpen(true)}>{trigger}</div>
      {isOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
          <div className="bg-white rounded-lg max-w-md w-full">
            <div className="p-4 border-b">{header}</div>
            <div className="p-4">{content}</div>
            <div className="p-4 border-t flex justify-end gap-2">
              {footer}
              <button onClick={() => setIsOpen(false)}>关闭</button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

// app/page.tsx - Server Component
import { Modal } from '@/components/Modal'

export default function Page() {
  return (
    <Modal
      trigger={<button>打开详情</button>}
      header={<ProductHeader />}   {/* Server */}
      content={<ProductDetails />} {/* Server */}
      footer={<ProductActions />}  {/* Server */}
    />
  )
}

app/products/[id]/page.tsx (Server)
├── ProductImages (Server) - 图片展示
├── ProductInfo (Server) - 基本信息
├── PriceDisplay (Server) - 价格展示
├── AddToCartButton (Client) - 加购按钮
├── QuantitySelector (Client) - 数量选择
├── ProductTabs (Client) - 标签切换容器
│   ├── Description (Server) - 商品描述
│   ├── Specifications (Server) - 规格参数
│   └── Reviews (Server) - 评价列表
└── SimilarProducts (Server) - 相似推荐

// components/ProductTabs.tsx - Client Component
'use client'

import { useState, ReactNode } from 'react'

interface Props {
  description: ReactNode
  specs: ReactNode
  reviews: ReactNode
}

export function ProductTabs({ description, specs, reviews }: Props) {
  const [activeTab, setActiveTab] = useState<'desc' | 'specs' | 'reviews'>(
    'desc'
  )

  const tabs = [
    { key: 'desc', label: '商品详情', content: description },
    { key: 'specs', label: '规格参数', content: specs },
    { key: 'reviews', label: '用户评价', content: reviews },
  ] as const

  return (
    <div>
      <div className="flex border-b">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`px-4 py-2 ${
              activeTab === tab.key ? 'border-b-2 border-blue-600' : ''
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="py-4">
        {tabs.find((t) => t.key === activeTab)?.content}
      </div>
    </div>
  )
}

// app/dashboard/page.tsx - Server Component
import { RefreshButton } from '@/components/RefreshButton'
import { DateRangePicker } from '@/components/DateRangePicker'

async function getStats() {
  return fetch('https://api.example.com/stats', {
    next: { revalidate: 60 },
  }).then((r) => r.json())
}

export default async function DashboardPage() {
  const stats = await getStats()

  return (
    <div>
      {/* Client: 日期筛选和刷新 */}
      <div className="flex justify-between mb-6">
        <DateRangePicker />
        <RefreshButton />
      </div>

      {/* Server: 统计卡片 */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        <StatCard title="总用户" value={stats.totalUsers} />
        <StatCard title="今日活跃" value={stats.activeToday} />
        <StatCard title="总收入" value={`¥${stats.revenue}`} />
        <StatCard title="订单数" value={stats.orders} />
      </div>

      {/* Server: 图表数据 */}
      <ChartSection data={stats.chartData} />
    </div>
  )
}

function StatCard({ title, value }: { title: string; value: string | number }) {
  return (
    <div className="bg-white p-4 rounded-lg shadow">
      <p className="text-gray-500 text-sm">{title}</p>
      <p className="text-2xl font-bold">{value}</p>
    </div>
  )
}

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <div className="h-64 bg-gray-100 animate-pulse" />,
})

export default function Page() {
  return <HeavyChart />
}