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

小成C
111 阅读6分钟

开始

随着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中实现同一个用户评论模块的代码：

// 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）

// 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>
  );
}

代码对比分析

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

  1. 架构组织- SSR: 单个文件集成所有功能

    • RSC: 按组件功能分离，清晰区分服务器组件和客户端组件

  2. 数据获取

    • SSR: 通过getServerSideProps一次获取所有数据
    • RSC: 直接在服务器组件中异步获取数据，更加自然

  3. 状态保留

    • SSR: 页面导航后，添加的评论和过滤设置会丢失
    • RSC: 客户端组件状态在部分更新和导航中得以保留

  4. 渲染控制

    • SSR: 整页渲染，无法分离静态内容和动态内容
    • RSC: 使用Suspense实现细粒度加载控制

各自的适用场景

SSR适用场景

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

RSC适用场景

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

总结

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

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

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

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

avatar
文章
阅读
粉丝