React 20 Server Components 详解

React 20 的发布标志着前端开发进入了一个新的时代，其中最核心的特性就是 Server Components (RSC) 的正式稳定。

什么是 Server Components？

Server Components 允许开发者在服务器端渲染组件，直接访问数据库和文件系统，而无需发送额外的 JavaScript 到客户端。这大大减少了 Bundle 体积。

主要优势

• 零 Bundle 体积: 服务端组件的代码不会打包发送给客户端。
• 直接后端访问: 可以直接在组件中查询数据库。
• 自动代码分割: 框架自动处理代码分割，无需手动配置。

示例代码

// Note.server.js
import db from 'db';

async function Note({id}) {
  const note = await db.notes.get(id);
  return (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
    </div>
  );
}

React 20 建议结合 Next.js 或 Remix 等框架使用，以获得最佳体验。