#React Server Components 踩坑记

最近把项目迁移到了 RSC，记录一些踩过的坑。

##坑 1: use client 的传染性

terminal
// 这个组件必须是客户端组件
'use client'

export function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

一旦标记了 'use client'，它导入的所有组件都会变成客户端组件。

##坑 2: 不能在服务端组件使用 hooks

terminal
// 这会报错！
export default function ServerPage() {
  const [state, setState] = useState() // ❌
  return <div>{state}</div>
}

##坑 3: Props 必须可序列化

terminal
// 不能传递函数作为 props
<ClientComponent 
  onClick={() => {}} // ❌ 这不行
  data={{ name: 'ok' }} // ✅ 这可以
/>

##最佳实践

1. 尽量使用服务端组件 - 减少客户端 JS
2. 把交互逻辑下沉 - 只在需要的地方用 'use client'
3. 用 Suspense 包裹数据获取 - 更好的加载体验

RSC 虽然有学习成本，但性能提升是真的香。