Next.js RSC / 服务端组件 / 客户端组件

三种组件类型

类型	文件	特点
RSC（默认）	不加标记	在服务端渲染，0 JS 发送到浏览器，可直接访问 DB
客户端组件	'use client'	在浏览器渲染，可用 useState/useEffect/onClick
共享组件	通用	纯展示，两边都能用

选择规则

需要交互？(useState/useEffect/onClick)
  → 是 → 'use client'
  → 否 → 默认 RSC（服务端组件）

关键点

• RSC 可以直接 await 读数据库，不需要 API 层
• 服务端组件中可以嵌套客户端组件，反过来不行
• 'use client' 是边界标记，该文件及其所有子组件都是客户端组件

模式：服务端包裹客户端

// page.tsx (RSC，可以直接读数据)
export default async function Page() {
  const data = await db.query('SELECT * FROM posts')
  return <ClientPostList posts={data} />  // 传数据给客户端组件
}