React Server Components 实战：流式渲染、缓存策略与混合架构

RSC 服务端执行后输出的不是 HTML，而是「组件树描述」：
{"type": "div", "props": {"children": [...]}}
或服务端组件引用：{"type": "$L1", ...}

客户端 React 解析这个 JSON-like 描述，构建虚拟 DOM，与现有树合并。
# 关键：Server Component 本身不打包到客户端 bundle 中

用 RSC：数据依赖重、不需要交互、SEO 重要的内容
用 Client Component：需要 useState/useEffect、DOM API、浏览器事件
# 默认所有组件都是服务端组件，需要客户端能力时加 'use client'

Server Component 在请求时于服务端执行：
- Node.js 运行时（Next.js 默认）
- Edge Runtime（V8 isolate，延迟更低）
- 可访问：fs、db、内部 API、环境变量
- 不可访问：window、document、localStorage

// app/page.tsx — Server Component（默认）
import { db } from '@/lib/db';

export default async function Page() {
  const posts = await db.query('SELECT * FROM posts');
  
  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

# 同一个渲染周期中，相同 URL 的 fetch 自动 dedupe
# React 内部缓存 fetch 结果，避免重复请求
# 注意：不使用 fetch（如 ORM 查询）需用 react.cache() 手动缓存

'use client';

import { useState } from 'react';

export default function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}

// Server Component 引入 Client Component
import LikeButton from './LikeButton';

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await db.query('SELECT * FROM posts WHERE id = ?', [params.id]);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
      <LikeButton postId={params.id} />  {/* Client Component */}
    </article>
  );
}

# 叶子节点优先客户端化：
#   页面（Server）→ 布局（Server）→ 交互组件（Client）
# 不要过度 'use client'：尽量把状态推到叶子
# Context Provider 需 'use client'，但子组件可保持 Server

import { Suspense } from 'react';
import { PostList } from './PostList';
import { PostListSkeleton } from './PostListSkeleton';

export default function Page() {
  return (
    <main>
      <h1>My Blog</h1>
      <Suspense fallback={<PostListSkeleton />}>
        <PostList />  {/* 异步组件，流式渲染 */}
      </Suspense>
    </main>
  );
}

服务器：
1) 渲染 Shell（不依赖异步数据的部分）→ 立即发送
2) 异步数据就绪 → 流式传输 Suspense 边界内的内容
3) 客户端：先显示 fallback，收到流后替换

关键：TTFB 快（Shell 先发）、FCP 快、LCP 在数据到后完成

React 18 的 Selective Hydration：
- 服务端已渲染的 HTML 先显示
- 用户交互的组件优先 hydrate
- 不交互的组件延迟 hydrate（on hover/scroll 时）
# 结合 RSC：服务端组件无需 hydrate，只有客户端组件需要

// 默认：force-cache（同 URL 请求间缓存）
const data = await fetch('https://api.example.com/posts');

// 禁用缓存
const data = await fetch('https://api.example.com/posts', { cache: 'no-store' });

// ISR 式缓存（Next.js 扩展）
const data = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }  // 60 秒后重新验证
});

import { cache } from 'react';

const getUser = cache(async (id: string) => {
  return db.query('SELECT * FROM users WHERE id = ?', [id]);
});

// 同一个渲染中多次调用自动去重
const user = await getUser('123');
const sameUser = await getUser('123'); // 返回缓存

Full Route Cache：整路由 HTML 缓存（Next.js）
Router Cache：客户端路由缓存（导航时不重新请求）
Data Cache：fetch 结果缓存（服务端）
Request Memoization：react.cache（请求级别）

// app/actions.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  const content = formData.get('content');
  
  await db.query('INSERT INTO posts (title, content) VALUES (?, ?)', [title, content]);
  
  revalidatePath('/posts');
  redirect('/posts');
}

// app/posts/new/page.tsx
import { createPost } from '@/app/actions';

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" />
      <textarea name="content" placeholder="Content" />
      <button type="submit">Create</button>
    </form>
  );
}

Server Action + 表单：
- 无 JS：表单正常提交（全页刷新）
- 有 JS：AJAX 提交 + 局部更新
# 天然支持渐进增强，无需额外代码

app/
├── layout.tsx          # 根布局（必须）
├── page.tsx            # / 路由
├── loading.tsx         # Suspense fallback 替代
├── error.tsx           # Error Boundary
├── not-found.tsx       # 404 页面
├── posts/
│   ├── page.tsx        # /posts
│   ├── [id]/
│   │   ├── page.tsx    # /posts/:id
│   │   └── layout.tsx  # 嵌套布局
│   └── new/
│       └── page.tsx    # /posts/new

@app/dashboard/page.tsx        # /dashboard
@app/@modal/page.tsx           # Parallel route（模态框）

Intercepting：
(app)/posts/[id]/page.tsx      # 正常页面
@app/(.)posts/[id]/page.tsx    # 拦截（从 / 打开时显示模态）

# 减少 Server Component 输出体积：
# 1) 避免传递大量数据到 Client Component
# 2) 用 Server Component 做数据转换，只传必要字段
# 3) 图片用 next/image 自动优化
# 4) 第三方库用 Server Component 引入（不打包到客户端）

# 1) 在 Server Component 中用浏览器 API → 报错
# 2) 在 Client Component 顶层 await → 需要 async 函数包裹
# 3) Context 跨边界：Server Component 不能用 React Context（需 'use client'）
# 4) 过度 'use client'：把数据获取放到 Server，只交互部分 Client
# 5) 忘记 revalidate：Server Action 后需刷新缓存

# React DevTools：看组件是 Server 还是 Client
# Next.js DevOverlay：开发时错误提示
# Network Tab：看 RSC Payload 流式传输
# next build --analyze：分析客户端 bundle 体积