为什么会演化出RSC，SSR和RSC关系大解密

开始

随着Web应用日益复杂化，前端渲染模式也在不断演变。从早期的多页应用(MPA)，到单页应用(SPA)，再到服务器端渲染(SSR)、静态站点生成(SSG)，直至最新的React Server Components(RSC)，每种模式都有其独特的优势和适用场景。本文将深入探讨这些渲染模式，特别聚焦于SSR和RSC的区别，帮助开发者在项目中做出明智的技术选择。

现代前端渲染模式概览

现代前端开发主要有四种渲染模式：SPA、SSR、SSG和RSC。每种模式采用不同的渲染策略，在性能、开发体验和用户体验之间做出权衡。

四种渲染模式的工作流程：

我们先通过一个流程图来直观地理解这四种模式的工作流程：

flowchart TD subgraph Client [客户端浏览器] A1[请求页面] A2[渲染DOM] A3[水合过程] A4[交互页面] end subgraph SPA [SPA模式] B1[加载JS包] B2[客户端渲染] B3[客户端数据获取] end subgraph SSR [SSR模式] C1[服务端获取数据] C2[服务端生成HTML] C3[发送完整HTML至客户端] C4[整页水合] end subgraph SSG [SSG模式] D1[构建时获取数据] D2[构建时生成静态HTML] D3[发送预渲染HTML] D4[客户端水合] end subgraph RSC [RSC模式] E1[服务端组件渲染] E2[客户端组件标记] E3[组合生成HTML和JS指令] E4[选择性水合] end A1 --> SPA --> B1 --> B2 --> B3 --> A2 --> A3 --> A4 A1 --> SSR --> C1 --> C2 --> C3 --> A2 --> C4 --> A4 A1 --> SSG --> D3 --> A2 --> D4 --> A4 A1 --> RSC --> E1 --> E2 --> E3 --> A2 --> E4 --> A4 style A1 fill:#f9f,stroke:#ccc,stroke-width:3px style A4 fill:#bbf,stroke:#ddd,stroke-width:3px

SSR与RSC深度对比

在解析完四种主要渲染模式后，接下来我们重点深入比较SSR和RSC，这两种模式代表了React渲染策略的重要演进方向。

1. 渲染粒度：页面级vs 组件级

SSR (服务器端渲染)：

以整个页面为渲染单位
在服务器上渲染完整的HTML页面
"全或无"策略 - 无法在一个页面内混合渲染策略

RSC (React Server Components)：

以组件为渲染单位
可以精确指定哪些组件在服务器渲染，哪些在客户端渲染 -允许在同一个页面中混合不同的渲染策略

2. 水合(Hydration)过程

水合是指将静态HTML转变为可交互应用的过程，是理解现代前端框架的关键概念。

SSR中的水合：

整个页面需要完整水合
所有组件的JavaScript代码都需要下载和执行
导致较大的JavaScript包体积和执行开销

RSC中的水合：

选择性水合，只有客户端组件需要水合
服务器组件不需要JavaScript代码，也不需要水合
大幅减少JavaScript包体积和执行开销

3. 状态管理比较

SSR状态重建：

水合过程中所有组件状态从初始值重建
导航或刷新后，用户交互状态丢失
需要额外的状态管理库来解决状态保留问题

RSC状态保留：

服务器组件没有状态（不使用hooks）
客户端组件状态可以在导航和更新中保留
服务器组件更新不会导致客户端组件重新挂载

4. 数据获取模式

SSR数据获取：

集中在页面顶层获取（如通过getServerSideProps）
所有数据必须一次性获取
数据必须可序列化

RSC数据获取：

分散在各个服务器组件中
可以直接使用async/await语法
可以访问非序列化资源（如数据库连接）

思维导图对比

为了更直观地理解SSR与RSC的区别，我整理了两个思维导图：

SSR思维导图

mindmap root((SSR)) 工作原理服务器渲染HTML 执行React组件生成HTML文档客户端接收静态HTML 快速展示内容首屏渲染提速 JavaScript下载与执行下载React代码整页水合 Next.js实现 Pages目录结构 getServerSideProps 每次请求执行返回页面props 整页数据获取渲染粒度页面级渲染全有或全无策略无法混合渲染策略状态管理状态重建机制水合重建状态状态不保留全页面交互绑定优点 SEO友好首屏体验好无需客户端渲染缺点服务器压力大 TTFB较长整页水合开销大

RSC思维导图

mindmap root((RSC)) 组件模型服务器组件默认所有组件无状态直接数据访问无需客户端JS 客户端组件 use client标记处理交互保持状态使用hooks 工作原理组件级渲染策略服务器渲染服务器组件客户端渲染客户端组件选择性水合只水合客户端组件服务器组件无需水合服务器客户端协议组件树序列化传输异步渲染支持 Next.js实现 App目录结构异步组件直接await获取数据无需数据获取hooks Suspense集成流式UI更新逐步加载内容状态管理客户端状态保留导航中保留状态局部更新不重置状态精细化组件控制优点组件级别优化减少JavaScript传输开发体验提升更细粒度的加载状态缺点较新技术需要特定框架支持学习曲线较陡

实际案例对比：用户评论模块

比较在SSR与RSC中实现同一个用户评论模块的代码：

javascript 复制代码

// pages/post/[id].js - SSR模式
import { useState } from 'react';

function PostPage({ post, initialComments }) {
  // 注意：每次导航或重新水合时，这些状态都会被重置
  const [comments, setComments] = useState(initialComments);
  const [newComment, setNewComment] = useState('');
  const [filter, setFilter] = useState('all');
  // 添加评论函数
  const addComment = () => {
    if (!newComment.trim()) return;
    const comment = {
      id: Date.now(),
      text: newComment,
      author: 'Current User',
      date: new Date().toISOString()
    };
    
    setComments([comment, ...comments]);
    setNewComment('');
  };
  
  // 过滤评论
  const filteredComments = filter === 'all' 
    ? comments
    : comments.filter(c => c.author === 'Current User');return (
    <div className="post-page">
      <h1>{post.title}</h1>
      <div className="post-content">{post.content}</div>
      
      <div className="comments-section">
        <h2>评论 ({comments.length})</h2>
        {/* 添加评论表单 */}
        <div className="add-comment">
          <textarea
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            placeholder="添加评论..."
          />
          <button onClick={addComment}>提交</button>
        </div>
        
        {/* 过滤选项 */}
        <div className="filter-options">
          <button
            className={filter === 'all' ? 'active' : ''}
            onClick={() => setFilter('all')}
          >
            所有评论
          </button>
          <button
            className={filter === 'mine' ? 'active' : ''}
            onClick={() => setFilter('mine')}
          >
            我的评论
          </button>
        </div>
        
        {/* 评论列表 */}
        <div className="comments-list">
          {filteredComments.map(comment => (
            <div key={comment.id} className="comment">
              <p className="author">{comment.author}</p>
              <p className="text">{comment.text}</p>
              <p className="date">{new Date(comment.date).toLocaleDateString()}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  
  const post = await fetch(`https://api.example.com/posts/${id}`).then(r => r.json());
  const initialComments = await fetch(`https://api.example.com/posts/${id}/comments`).then(r => r.json());
  
  return {
    props: {
      post,
      initialComments
    }
  };
}

export default PostPage;

RSC实现（Next.js App Router）

javascript 复制代码

// app/post/[id]/page.jsx -页面服务器组件
import { Suspense } from 'react';
import PostContent from './post-content'; // 服务器组件
import CommentSection from './comment-section'; // 客户端组件

export default async function PostPage({ params }) {
  const { id } = params;
  
  // 在服务器获取文章数据
  const post = await fetch(`https://api.example.com/posts/${id}`).then(r => r.json());
  
  return (
    <div className="post-page">
      <PostContent post={post} />
      <Suspense fallback={<p>加载评论...</p>}>
        <CommentSection postId={id} />
      </Suspense>
    </div>
  );
}

// app/post/[id]/post-content.jsx - 服务器组件
export default function PostContent({ post }) {
  return (
    <>
      <h1>{post.title}</h1>
      <div className="post-content">{post.content}</div>
    </>
  );
}

// app/post/[id]/comment-section.jsx - 客户端组件
'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function CommentSection({ postId }) {
  const router = useRouter();
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');
  const [filter, setFilter] = useState('all');
  const [isLoading, setIsLoading] = useState(true);
  
  // 加载评论
  useEffect(() => {
    async function loadComments() {
      setIsLoading(true);
      try {
        const fetchedComments = await fetch(`https://api.example.com/posts/${postId}/comments`).then(r => r.json());
        setComments(fetchedComments);
      } catch (error) {
        console.error('Failed to load comments:', error);
      }
      setIsLoading(false);
    }
    loadComments();
  }, [postId]);// 添加评论
  const addComment = async () => {
    if (!newComment.trim()) return;
    
    const comment = {
      id: Date.now(),
      text: newComment,
      author: 'Current User',
      date: new Date().toISOString(),pending: true
    };
    
    //乐观UI更新
    setComments([comment, ...comments]);
    setNewComment('');
    // 发送到服务器
    try {
      const response = await fetch(`https://api.example.com/posts/${postId}/comments`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: newComment })
      });
      
      if (!response.ok) throw new Error('Failed to add comment');
      //刷新评论数据（可选）
      // router.refresh(); // 不会丢失客户端组件状态！
    } catch (error) {
      console.error('Failed to add comment:', error);
    }
  };
  
  // 过滤后的评论
  const filteredComments = filter === 'all' 
    ? comments
    : comments.filter(c => c.author === 'Current User');
  
  if (isLoading) return <p>加载评论中...</p>;
  
  return (
    <div className="comments-section">
      <h2>评论 ({comments.length})</h2>
      <div className="add-comment">
        <textarea 
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="添加评论..."
        />
        <button onClick={addComment}>提交</button>
      </div><div className="filter-options">
        <button 
          className={filter === 'all' ? 'active' : ''}
          onClick={() => setFilter('all')}
        >
          所有评论
        </button>
        <button 
          className={filter === 'mine' ? 'active' : ''}
          onClick={() => setFilter('mine')}
        >
          我的评论
        </button>
      </div><div className="comments-list">
        {filteredComments.map(comment => (
          <div key={comment.id} className="comment">
            <p className="author">{comment.author}</p>
            <p className="text">{comment.text}</p>
            <p className="date">
              {comment.pending ? '发送中...' : new Date(comment.date).toLocaleDateString()}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

代码对比分析

通过以上代码对比，我们可以看出几个关键区别：

架构组织- SSR: 单个文件集成所有功能
- RSC: 按组件功能分离，清晰区分服务器组件和客户端组件
数据获取
- SSR: 通过getServerSideProps一次获取所有数据
- RSC: 直接在服务器组件中异步获取数据，更加自然
状态保留
- SSR: 页面导航后，添加的评论和过滤设置会丢失
- RSC: 客户端组件状态在部分更新和导航中得以保留
渲染控制
- SSR: 整页渲染，无法分离静态内容和动态内容
- RSC: 使用Suspense实现细粒度加载控制

各自的适用场景

SSR适用场景

需要SEO的内容网站：博客、新闻网站、电商产品页等
首屏加载速度要求高的应用：用户体验对转化率影响较大的场景
传统MPA到SPA的过渡项目：可以逐步迁移的场景
技术栈需要稳定的项目：SSR已经是相对成熟的技术

RSC适用场景

复杂的应用界面：需要细粒度控制组件渲染和加载状态的场景
大型应用：需要优化JavaScript包体积和首屏加载性能
数据库直接集成：需要在组件中直接访问数据库或其他后端资源
渐进式加载体验：需要实现高质量、流畅的用户界面

总结

通过对比SSR和RSC，我们可以看出React渲染技术的不断演进。RSC并不是为了取代SSR，而是提供了一种新的组件模型，解决了SSR在组件粒度、JavaScript负载、状态管理等方面的固有问题。

随着React生态系统的不断发展，我们可以预见未来的趋势：

混合渲染策略：在同一应用中根据需要选择不同的渲染模式
更精细的性能优化：框架层面提供更智能的渲染决策
开发体验持续改善：更自然的数据获取和状态管理模式
全栈React体验：服务器和客户端代码的边界越来越模糊

React Server Components代表了React团队对未来Web开发的愿景，它带来了崭新的思考方式，将服务器和客户端视为组件渲染的连续体，而非分离的环境。随着这项技术的成熟，我们有望看到更多创新的前端架构模式出现。