React Server Components 笔记

边界从 use client 开始

在支持 RSC 的框架中，组件默认可以在服务端渲染。只有需要状态、事件处理器或浏览器 API 的模块才在文件顶部写 'use client'。这个指令会把该模块及其导入图中的客户端依赖划到客户端边界。

// SearchBox.tsx
'use client'

import { useState } from 'react'
export function SearchBox() {
  const [query, setQuery] = useState('')
  return <input onChange={e => setQuery(e.target.value)} />
}

服务端组件可以直接读取数据库或调用后端服务，并把可序列化 props 交给客户端组件；函数、class 实例和大多数复杂对象不能直接跨越这个边界。

实践要点

• 把交互“叶子化”，不要为了一个按钮把整个页面标为客户端组件。
• 服务端组件可组合客户端组件，但客户端组件不能直接 import 服务端组件。
• 数据读取与缓存策略依赖具体框架；不要把 RSC 等同于传统 SSR。

把权限判断和敏感数据访问留在服务端组件或服务端 action 中，客户端边界不应成为数据暴露的捷径。

组件树中存在客户端组件不代表它的 children 都要变成客户端代码；组合方式会影响最终传输和打包。