序列化

前言 React Server Components (RSC) 是 React 团队在 2020 年底引入的革命性特性，Next.js 15 将这一特性推向了成熟。RSC 不仅仅是渲染方式的改变，更是前端开发范式的一次重大转移。 本文将从实现原理的角度，深入解析 Next.js 15 中 React Server Components 的工作机制，帮助您真正理解这一技术背后的设计哲学和最佳实践。 一、RSC 的核心概念 1.1 什么是 Server Components Server Components 是一种特殊的 React 组件，它们： 在服务器上渲染：完全不发送 JavaScript 到客户端 直接访问后端资源：可以读取数据库、文件系统、内部 API 不包含交互性：不能使用 hooks (useState, useEffect) 和事件处理器 流式传输：支持渐进式渲染，可以逐步发送 UI 片段 1.2 客户端组件 vs 服务端组件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // ✅ Server Component (默认) // 文件名: app/components/UserList.tsx import { db } from '@/lib/db' export default async function UserList() { // 可以直接访问数据库 const users = await db.user.findMany() return ( <div> {users.map(user => ( <div key={user.id}>{user.name}</div> ))} </div> ) } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // ✅ Client Component // 文件名: app/components/UserCard.tsx 'use client' import { useState } from 'react' export function UserCard({ userId }: { userId: string }) { // 可以使用 hooks const [liked, setLiked] = useState(false) return ( <div> <button onClick={() => setLiked(!liked)}> {liked ? '❤️' : '🤍'} </button> </div> ) } 1.3 架构对比 传统 React 架构 ┌─────────────────────────────────────────┐ │ Browser (Client) │ │ ┌───────────────────────────────────┐ │ │ │ React App (JavaScript Bundle) │ │ │ │ ├── Components │ │ │ │ ├── State Management │ │ │ │ └── API Calls (fetch) │ │ │ └───────────────────────────────────┘ │ └─────────────────────────────────────────┘ ↕ HTTP Request ┌─────────────────────────────────────────┐ │ Server (API) │ │ ┌───────────────────────────────────┐ │ │ │ Database │ │ │ │ File System │ │ │ │ Internal Services │ │ │ └───────────────────────────────────┘ │ └─────────────────────────────────────────┘ RSC 架构 ┌─────────────────────────────────────────┐ │ Browser (Client) │ │ ┌───────────────────────────────────┐ │ │ │ Client Components (Interactive) │ │ │ │ ├── Event Handlers │ │ │ │ ├── State (useState) │ │ │ │ └── Effects (useEffect) │ │ │ └───────────────────────────────────┘ │ │ ↕ (RSC Payload - JSON) │ │ ┌───────────────────────────────────┐ │ │ │ React Server Runtime │ │ │ │ (Reconstructs Server Tree) │ │ │ └───────────────────────────────────┘ │ └─────────────────────────────────────────┘ ↕ HTTP Request ┌─────────────────────────────────────────┐ │ Server │ │ ┌───────────────────────────────────┐ │ │ │ Server Components │ │ │ │ ├── Direct DB Access │ │ │ │ ├── File System Access │ │ │ │ └── Internal APIs │ │ │ └───────────────────────────────────┘ │ └─────────────────────────────────────────┘ 二、RSC 渲染流程 2.1 完整渲染周期 1. Request ↓ 2. Server renders Server Components to RSC Payload ↓ 3. Server sends HTML + RSC Payload to Client ↓ 4. Browser displays HTML (immediate paint) ↓ 5. React hydrates Client Components ↓ 6. React reconstructs Server Tree from RSC Payload ↓ 7. Interactive 2.2 RSC Payload 格式 RSC Payload 是一种特殊的 JSON 格式，用于描述组件树： ...