重读 React Server Components：一年后的实践答案

RSC 不是「服务端渲染的回归」，而是一种新的组件分类学。用了一年，记下十条最值得复述的经验。

组件边界即数据边界#

Server Component 里能直接 await 数据，但不要因此把数据获取塞进叶子组件。边界应当沿「数据所有权」划分：

export default async function Page({ params }) {  const { slug } = await params  const post = await getPost(slug)     // 服务端直达数据层  return <ArticleBody post={post} />   // 子组件只吃 props}

十条经验#

1. 默认都是 Server Component，需要交互再加 "use client"
2. 把 use client 的组件推到叶子，序列化边界越小越好
3. children prop 是穿透边界传 JSX 的正道
4. Server Actions 适合表单与变更，不适合高频轮询
5. 缓存三件套：请求级 cache、路由段 ISR、标签 revalidateTag
6. searchParams 与 params 都是 Promise，记得 await
7. 流式渲染配合 Suspense，先出骨架再补数据
8. 错误边界（error.tsx）必须在 Client Component 里
9. 不要在 Server Component 里引用浏览器 API
10. RSC payload 不等于 HTML——它是可恢复的组件树协议

一个反例#

"use client"export function CommentList({ postId }) {  const [comments, setComments] = useState([])  useEffect(() => {    fetch(`/api/comments?post=${postId}`)   // ❌ 多一跳、多一状态机      .then(r => r.json()).then(setComments)  }, [postId])}

同样的数据在服务端一行就能拿到，序列化成本远低于一条额外请求加瀑布。