React Server Components 的数据边界怎么设计

// page.tsx - Server Component
import { prisma } from '@/lib/db'
import { SpecSelector } from './_components/spec-selector' // 'use client'
 
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await prisma.product.findUnique({
    where: { id: params.id },
    include: { specs: true, variants: true }
  })
 
  // ❌ 直接把 ORM 对象传给 Client Component
  return <SpecSelector product={product} />
}

// _components/spec-selector.tsx - Client Component
'use client'
 
import { useState } from 'react'
 
// ❌ product 里包含 Decimal、Date、循环引用
export function SpecSelector({ product }: { product: Product }) {
  const [selected, setSelected] = useState<string[]>([])
  const price = product.price // Decimal 对象，序列化后变成 {}
 
  return (
    <div>
      <span>¥{price.toString()}</span> {/* 显示 NaN */}
      {/* ...规格选择 UI */}
    </div>
  )
}

// page.tsx - Server Component
import { prisma } from '@/lib/db'
import { SpecSelector } from './_components/spec-selector'
 
// 在边界上做数据塑形，把 ORM 对象转成纯 JSON 结构
function shapeProductForClient(product: any) {
  return {
    id: product.id,
    name: product.name,
    price: Number(product.price),      // Decimal → number
    createdAt: product.createdAt.toISOString(), // Date → string
    specs: product.specs.map((s: any) => ({
      id: s.id,
      name: s.name,
      options: s.options              // 假设 options 是 JSON 字段，已经是纯对象
    })),
    variants: product.variants.map((v: any) => ({
      id: v.id,
      sku: v.sku,
      price: Number(v.price),
      stock: v.stock,
      specValueIds: v.specValueIds    // 纯数组
    }))
  }
}
 
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await prisma.product.findUnique({
    where: { id: params.id },
    include: { specs: true, variants: true }
  })
 
  // ✅ 传递纯数据对象
  return <SpecSelector product={shapeProductForClient(product)} />
}

// _components/spec-selector.tsx - Client Component
'use client'
import { useState } from 'react'
 
interface ProductDTO {
  id: string
  name: string
  price: number           // ✅ 纯 number
  createdAt: string       // ✅ ISO 字符串
  specs: Array<{ id: string; name: string; options: any }>
  variants: Array<{ id: string; sku: string; price: number; stock: number; specValueIds: string[] }>
}
 
export function SpecSelector({ product }: { product: ProductDTO }) {
  const [selected, setSelected] = useState<string[]>([])
  // ✅ 直接可用，不需要额外转换
  const price = product.price
 
  return (
    <div>
      <span>¥{price.toFixed(2)}</span>
      {/* ...规格选择 UI */}
    </div>
  )
}

// app/dashboard/page.tsx - Server Component
import { DashboardShell } from './_components/dashboard-shell' // 'use client'
import { StatsChart } from './_components/stats-chart'         // Server Component
 
export default async function DashboardPage() {
  const stats = await fetchStats()
 
  // ❌ DashboardShell 是 'use client'，它 import 了 StatsChart
  // StatsChart 会被拉进客户端 bundle，即使它本身不需要交互
  return (
    <DashboardShell>
      <StatsChart data={stats} />
    </DashboardShell>
  )
}

// _components/dashboard-shell.tsx
'use client'
import { useState } from 'react'
// ❌ 在 Client 文件里 import Server Component
// StatsChart 及其所有依赖都会被打包进客户端
import { StatsChart } from './stats-chart'
import { RecentOrders } from './recent-orders'
 
export function DashboardShell({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(true)
  return (
    <div>
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>菜单</button>
      {/* ❌ 直接 import 的组件全部变成客户端代码 */}
      <StatsChart data={...} />
      <RecentOrders />
      {children}
    </div>
  )
}

// _components/dashboard-shell.tsx
'use client'
import { useState } from 'react'
 
// ✅ 只 import 真正需要客户端交互的东西
export function DashboardShell({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(true)
  return (
    <div>
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>菜单</button>
      {/* ✅ children 由父级（Server Component）决定内容 */}
      {children}
    </div>
  )
}

// app/dashboard/page.tsx - Server Component
import { DashboardShell } from './_components/dashboard-shell'
import { StatsChart } from './_components/stats-chart'
import { RecentOrders } from './_components/recent-orders'
 
export default async function DashboardPage() {
  const stats = await fetchStats()
  const orders = await fetchOrders()
 
  // ✅ StatsChart 和 RecentOrders 保持在服务端渲染
  // 它们作为 children 传入 DashboardShell，但不会被拉进客户端 bundle
  return (
    <DashboardShell>
      <StatsChart data={stats} />
      <RecentOrders orders={orders} />
    </DashboardShell>
  )
}

// page.tsx - Server Component
import { CommentForm } from './_components/comment-form' // 'use client'
 
export default async function ArticlePage() {
  const article = await fetchArticle()
 
  // ❌ handleSubmit 是函数，不能跨越序列化边界
  async function handleSubmit(content: string) {
    'use server'
    await db.comment.create({ data: { content, articleId: article.id } })
  }
 
  return <CommentForm onSubmit={handleSubmit} />
}

// actions/comment-actions.ts
'use server'
 
import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'
 
// ✅ Server Action 独立成模块，在 Client Component 中 import 使用
export async function submitComment(formData: FormData) {
  const content = formData.get('content') as string
  const articleId = formData.get('articleId') as string
 
  if (!content || content.length > 2000) {
    return { success: false, error: '评论内容不合法' }
  }
 
  try {
    await db.comment.create({
      data: { content, articleId }
    })
    // ✅ 用 revalidatePath 触发服务端数据刷新
    revalidatePath(`/article/${articleId}`)
    return { success: true }
  } catch (e) {
    return { success: false, error: '提交失败，请重试' }
  }
}

// _components/comment-form.tsx - Client Component
'use client'
import { useState } from 'react'
import { submitComment } from '@/actions/comment-actions'
 
export function CommentForm({ articleId }: { articleId: string }) {
  const [content, setContent] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
 
  async function handleSubmit(formData: FormData) {
    setSubmitting(true)
    setError(null)
    try {
      // ✅ Server Action 返回纯 JSON 结果
      const result = await submitComment(formData)
      if (!result.success) {
        setError(result.error ?? '未知错误')
      } else {
        setContent('') // ✅ 客户端状态独立管理
      }
    } finally {
      setSubmitting(false)
    }
  }
 
  return (
    <form action={handleSubmit}>
      <input type="hidden" name="articleId" value={articleId} />
      <textarea
        name="content"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        disabled={submitting}
      />
      {error && <p role="alert">{error}</p>}
      <button type="submit" disabled={submitting || !content.trim()}>
        {submitting ? '提交中...' : '提交评论'}
      </button>
    </form>
  )
}

// page.tsx - Server Component
import { ProductHeader } from './_components/product-header' // Server Component
import { StockIndicator } from './_components/stock-indicator' // 'use client'
 
export default async function ProductPage({ params }: { params: { id: string } }) {
  // ❌ 默认走 Data Cache，商品基础信息可能过期
  const product = await fetch(`https://api.example.com/product/${params.id}`)
    .then(r => r.json())
 
  // ❌ StockIndicator 里用另一个 fetch 查实时库存
  // 两个数据源的缓存策略完全不同，但页面上看起来是同一时刻的数据
  return (
    <div>
      <ProductHeader product={product} />
      <StockIndicator productId={params.id} />
    </div>
  )
}

// page.tsx - Server Component
import { ProductHeader } from './_components/product-header'
import { StockIndicator } from './_components/stock-indicator'
import { ProductPrice } from './_components/product-price'
 
export default async function ProductPage({ params }: { params: { id: string } }) {
  // ✅ 基础信息：长时间缓存，变更频率低
  const product = await fetch(
    `https://api.example.com/product/${params.id}`,
    { next: { revalidate: 3600 } } // 每小时重新验证
  ).then(r => r.json())
 
  // ✅ 价格信息：中等缓存，走 Data Cache 但设置合理的 revalidate
  const pricing = await fetch(
    `https://api.example.com/pricing/${params.id}`,
    { next: { revalidate: 300 } } // 5 分钟刷新
  ).then(r => r.json())
 
  // ✅ 库存信息：不缓存，每次请求实时查询
  // 放在独立的 Server Component 里，用 Suspense 包裹
  return (
    <div>
      <ProductHeader product={product} pricing={pricing} />
      {/* 库存用独立的 Suspense 边界，不阻塞首屏 */}
      <Suspense fallback={<StockSkeleton />}>
        <StockIndicator productId={params.id} />
      </Suspense>
    </div>
  )
}

// _components/stock-indicator.tsx - Server Component（不需要 'use client'）
// ✅ 每次请求都实时查询，没有缓存
export async function StockIndicator({ productId }: { productId: string }) {
  const stock = await fetch(
    `https://api.example.com/stock/${productId}`,
    { cache: 'no-store' } // ✅ 显式关闭缓存
  ).then(r => r.json())
 
  return (
    <span className={stock.count > 0 ? 'text-green-600' : 'text-red-600'}>
      {stock.count > 0 ? `库存 ${stock.count} 件` : '暂时缺货'}
    </span>
  )
}