React Server Components 实践笔记

/技术

什么是 Server Components

React Server Components 是 React 架构的一次重要演进。它允许组件在服务端执行，直接访问数据源，然后将渲染结果发送到客户端。

这意味着我们可以在组件中直接读取数据库、调用内部 API，而不需要额外的数据获取层。

实践中的收获

在实际使用过程中，我总结了几点值得注意的地方：

  1. 默认情况下所有组件都是 Server Components
  2. 只有需要交互（事件处理、状态管理）的组件才需要标记为 'use client'
  3. Server Components 可以 import Client Components，反过来则不行

最好的架构是让大部分组件保持为 Server Components，只在叶子节点使用 Client Components。

数据获取模式

async function PostList() {
  const posts = await db.post.findMany()
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

这种模式的优势在于数据获取和渲染在同一个地方完成，代码更加直观。