返回文章列表
React前端架构

理解 React Server Components

D
Dev Notes
8 min read

Server Components 改变了我们思考数据获取和渲染的方式。本文深入探讨其工作原理及在实际项目中的最佳实践。

React Server Components（RSC）是 React 生态中最重要的范式转变之一。它让我们重新思考组件应该在哪里运行。

什么是 Server Components？

Server Components 是在服务器上渲染的 React 组件。它们不会向客户端发送 JavaScript bundle，这意味着更小的包体积和更快的初始加载。 

// 这是一个 Server Component（默认行为）

async function BlogPost({ slug }: { slug: string }) {


  // 可以直接访问数据库，无需 API


  const post = await db.post.findUnique({ where: { slug } });

  

  return (


    


      
{post.title}


      
{post.content}


    


  );


}

核心优势

1. 零客户端 JavaScript

Server Components 不打包到客户端。如果你的组件只是渲染数据，就没有理由把逻辑发送到浏览器。 2. 直接访问后端资源 

// 直接读取文件系统

import fs from 'fs';
async function MDXPost({ slug }: { slug: string }) {


  const content = fs.readFileSync(posts/${slug}.mdx, 'utf-8');


  return ;


}
3. 自动代码拆分

每个 Client Component 成为自动的代码分割点。

何时使用 Client Components？

当组件需要以下功能时，使用 'use client'：

  • 事件处理器（onClick, onChange）
  • React hooks（useState, useEffect）
  • 浏览器 API

总结

Server Components 不是替代 Client Components，而是让你更精细地控制什么在服务端、什么在客户端运行。合理组合两者，是现代 React 应用的关键。

所有文章

© 2026 Dev Notes