React Server Components 深度解析：前端渲染的范式转移
React Server Components Deep Dive A Paradigm Shift in Frontend Rendering
| iDev Team | 2026-08-17T07:46:00
React Server Components 改变了前后端边界，让组件可以在服务端执行并直接访问数据库。本文深入解析其工作原理、使用场景和与传统 SSR 的区别。
React Server Components blur the frontend-backend boundary, allowing components to execute on the server and directly access databases. This article explains how they work, when to use them, and how they differ from traditional SSR.
什么是 Server Components React Server Components (RSC) 是 React 18+ 引入的全新渲染模式。与传统的客户端组件不同，Server Components 在服务端执行，不会发送任何 JavaScript 到浏览器。它们可以直接访问数据库、文件系统和后端服务，而不需要 API 层。 与传统 SSR 的区别 特性传统 SSRServer Components 执行位置服务端渲染完整 HTML服务端渲染组件树的一部分 Hydration需要完整 hydrationServer Components 不需要 hydration JS 包大小所有组件都在 bundle 中Server Components 的代码不发送到客户端 数据获取getServerSideProps 等组件内直接 async/await 交互性hydration 后可交互Server Components 不可交互，需配合 Client Components 核心优势 零 JS 包：纯展示型组件（如文章内容、产品描述）不会增加客户端 JS 体积 直接数据访问：在组件内直接查询数据库，不需要写 API 端点 自动代码分割：只有 Client Components 才会被发送到浏览器 流式渲染：配合 Suspense 实现渐进式页面加载 实际使用示例 // Server Component — 不发送到浏览器 async function ArticlePage({ id }) { const article = await db.query('SELECT * FROM articles WHERE id = ?', [id]) return ( <article> <h1>{article.title}</h1> <div dangerouslySetInnerHTML={{ __html: article.content }} /> <LikeButton articleId={id} /> {/* Client Component */} </article> ) } 何时使用 适合 RSC：内容展示页、博客文章、产品详情、数据报表 需要 Client Component：表单输入、按钮交互、动画、实时更新 在 Next.js 中使用 Next.js 13+ 的 App Router 默认所有组件都是 Server Components。需要交互的组件在文件顶部加 'use client' 标记。这使得 RSC 的使用变得非常自然。 iDev 的观点 RSC 适合内容密集型应用（如博客、电商、文档站）。对于我们的大多数客户项目（管理后台、SaaS 平台），Vue 3 + 传统前后端分离仍然是更高效的选择。技术选型要看场景，不要为了用新技术而用新技术。
What Are Server Components React Server Components (RSC) are a new rendering paradigm introduced in React 18+. Unlike traditional client components, Server Components execute on the server and send zero JavaScript to the browser. They can directly access databases, file systems, and backend services without an API layer. How RSC Differs from Traditional SSR FeatureTraditional SSRServer Components ExecutionServer renders complete HTMLServer renders part of the component tree HydrationFull hydration requiredServer Components need no hydration JS BundleAll components in bundleServer Component code never sent to client Data FetchinggetServerSideProps etc.Direct async/await in components InteractivityInteractive after hydrationNot interactive; pair with Client Components Key Advantages Zero JS Bundle: Display-only components (articles, product descriptions) add zero client-side JS Direct Data Access: Query databases directly in components without API endpoints Automatic Code Splitting: Only Client Components are sent to the browser Streaming: Progressive page loading with Suspense When to Use RSC Good for RSC: Content pages, blog posts, product details, data reports Need Client Component: Form inputs, button interactions, animations, real-time updates iDev's Perspective RSC suits content-heavy applications (blogs, e-commerce, documentation). For most of our client projects (admin dashboards, SaaS platforms), Vue 3 with traditional frontend-backend separation remains more efficient. Technology selection should match the scenario — don't adopt new tech just because it's new.