React 19 服务端组件完全指南

什么是服务端组件？

React 19 引入了全新的 Server Components 架构，允许组件在服务端渲染，大幅减少客户端 JavaScript 体积。

核心概念

服务端组件 vs 客户端组件

服务端组件（默认）：

• 在服务器上渲染
• 可以直接访问数据库
• 不包含交互逻辑
• 不会被打包到客户端 JS

客户端组件：

• 添加 "use client" 指令
• 支持交互（事件处理、状态、效果）
• 在浏览器中运行

最佳实践

1. 默认使用服务端组件
2. 只在需要交互时才使用客户端组件
3. 将客户端组件尽量放在组件树的叶子节点
4. 使用 Suspense 实现流式渲染

示例代码

// app/posts/page.tsx - 服务端组件（默认）
async function PostsPage() {
  const posts = await db.post.findMany()
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

总结

React 19 的服务端组件为现代 Web 开发带来了革命性的变化，让开发者能够构建更快、更简洁的应用。