React Server Components（RSC）是 React 18+ 的一个重要特性，它让组件可以在服务器端运行，直接把数据渲染成 HTML 发送给客户端。这听起来像 SSR，但 RSC 更灵活：它可以在服务器和客户端之间无缝切换，而且客户端不需要下载服务器组件的代码。

React Server Components 架构图

RSC 的核心优势

减少客户端 JS 体积：Server Components 的代码不会被打包到客户端，只有 Client Components 才会。这意味着首屏 JS 体积可以大幅减少。

数据直出：在服务器端直接访问数据库或 API，不需要通过客户端 API 路由，减少了网络往返。

SEO 友好：服务器渲染的内容对搜索引擎更友好，特别是内容型页面。

适用场景：

• ✅ 内容型页面：博客、新闻、文档站

• ✅ 个性化列表：用户推荐、动态内容

• ✅ 数据密集型页面：仪表盘、报表

Server Components vs Client Components

Server Components（默认）：

• 在服务器运行，代码不会发送到客户端

• 可以直接访问数据库、文件系统

• 不能使用浏览器 API（window、document）

• 不能使用 useState、useEffect 等 Hooks

• 不能使用事件处理器

**Client Components（需要 'use client'）**：

• 在客户端运行，代码会打包到客户端

• 可以使用所有浏览器 API

• 可以使用所有 React Hooks

• 可以使用事件处理器

如何选择：

• 数据获取、数据库查询 → Server Component

• 用户交互、状态管理 → Client Component

• 静态内容 → Server Component

• 动态 UI、表单 → Client Component

React Server Components 示意图

实战模式

目录结构：Next.js App Router 的推荐结构：

app/(server)/layout.tsx # Server Componentpage.tsx # Server Componentcomponents/ArticleList.tsx # Server Component(client)/components/LikeButton.tsx # Client Component ('use client')SearchBar.tsx # Client Component

数据获取模式：

// tsx// app/articles/page.tsx (Server Component)async function ArticleList() {// 直接在服务器端获取数据const articles = await fetch('https://api.example.com/articles').then(res => res.json());return ({articles.map(article => (
))});}

交互组件模式：

// tsx// app/components/LikeButton.tsx'use client';import { useState } from 'react';export function LikeButton({ articleId }: { articleId: string }) {const [liked, setLiked] = useState(false);const handleLike = async () => {await fetch(`/api/articles/${articleId}/like`, { method: 'POST' });setLiked(true);};return ({liked ? '❤️' : ''});}

组合使用：

// tsx// Server Component 可以导入 Client Componentimport { LikeButton } from './components/LikeButton';async function ArticlePage({ id }: { id: string }) {const article = await getArticle(id);return (
{article.title}
{article.content}
{/* Client Component 作为子组件 */}
);}

React Server Components 实战

缓存与性能优化

React.cache()：用于缓存函数调用结果：

// tsximport { cache } from 'react';const getArticle = cache(async (id: string) => {const res = await fetch(`https://api.example.com/articles/${id}`);return res.json();});// 同一个请求 ID 只会调用一次async function ArticlePage({ id }: { id: string }) {const article = await getArticle(id);// ...}

流式传输：Next.js 支持流式 SSR，可以逐步发送 HTML：

// tsximport { Suspense } from 'react';async function ArticleList() {return (Loading...}>);}async function ArticleListContent() {const articles = await getArticles();return articles.map(article => 
);}

请求去重：React 会自动去重相同参数的请求：

// tsx// 这两个组件会共享同一个请求async function Header() {const user = await getUser();return 
Hello, {user.name}
;}async function Sidebar() {const user = await getUser(); // 不会重复请求return 
Profile: {user.name}
;}

常见问题与解决方案

问题1：Server Component 中使用浏览器 API

• 解决方案：把需要浏览器 API 的逻辑移到 Client Component

问题2：Props 序列化限制

• Server Component 传给 Client Component 的 props 必须是可序列化的

• 不能传递函数、类实例、Symbol 等

问题3：水合失败

• 确保 Server 和 Client 渲染的结果一致

• 使用 suppressHydrationWarning 处理已知的不一致

问题4：性能问题

• 避免在 Server Component 中做重计算

• 使用缓存减少重复请求

• 合理使用 Suspense 和流式传输

迁移建议

如果你是从传统 React 或 Next.js Pages Router 迁移：

1. 逐步迁移：先迁移一个页面，验证效果

2. 识别边界：明确哪些是 Server Component，哪些是 Client Component

3. 重构数据获取：把客户端数据获取移到服务器端

4. 测试覆盖：确保功能正常，特别是交互部分

监控指标

关键指标：

• TTFB (Time to First Byte)：服务器响应时间

• FCP (First Contentful Paint)：首屏内容渲染时间

• Hydration Time：客户端水合时间

• Bundle Size：客户端 JS 体积

工具推荐：

• Next.js Analytics

• Web Vitals

• Lighthouse

小结

React Server Components 让前端开发更接近"全栈"，但要注意：

• ✅ 明确边界：Server Component 和 Client Component 的职责要清晰

• ✅ 性能优化：用好缓存、流式传输、请求去重

• ✅ 渐进迁移：不要一次性全改，逐步验证效果

• ✅ 监控指标：关注 TTFB、FCP、Hydration 时间

RSC 确实让首屏更快了，但也要注意平衡。不是所有组件都要做成 Server Component，交互密集的部分还是要用 Client Component。工具再好，也要用得对才行。

把重逻辑丢给服务器，前端轻装上阵，听起来很美好，但实际开发中要注意数据/交互的分界。分界清晰了，才能真正发挥 RSC 的优势。

React Server Components 架构图