React Server Components 原理精讲

// 默认就是 Server Component — 无需声明
export default async function ChatPage() {
  const chats = await db.query.chats.findMany() // 直接查数据库
  return <ChatList chats={chats} />
}
 
// 必须显式声明 'use client' 才是 Client Component
'use client'
export function ChatInput() {
  const [text, setText] = useState('') // 可以用 Hooks
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}

// 'use client' 是一条边界线
'use client'
 
// 这个文件中 import 的所有组件都会变成 Client Component
import { Button } from './button'       // Button 变成 Client
import { formatDate } from './utils'    // utils 的 JS 会被发送到浏览器
 
export function ChatInput() {
  return <Button>Send</Button>
}

// ❌ 错误：在 Client Component 中导入 Server Component
'use client'
import { ServerOnlyComponent } from './server-component'
// 编译报错或运行时错误
 
// ❌ 错误：在 Client Component 中直接查数据库
'use client'
export function ChatList() {
  const chats = await db.query.chats.findMany() // ❌ 无法访问数据库
}

// app/chat/page.tsx (Server Component)
import { ChatLayout } from './chat-layout' // Client
import { ChatMessages } from './chat-messages' // Server
 
export default async function ChatPage() {
  const messages = await getMessages() // 服务端获取数据
 
  return (
    <ChatLayout>
      {/* ChatMessages 是 Server Component，但通过 children 传入 Client Component */}
      <ChatMessages messages={messages} />
    </ChatLayout>
  )
}

// chat-layout.tsx (Client Component)
'use client'
import { useState } from 'react'
 
export function ChatLayout({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(true)
 
  return (
    <div className="flex">
      <Sidebar open={sidebarOpen} />
      <main>{children}</main>  {/* Server Component 通过 children 渲染 */}
    </div>
  )
}

// chat-messages.tsx (Server Component — 不需要 'use client')
export async function ChatMessages({ messages }: { messages: Message[] }) {
  return (
    <ul>
      {messages.map(m => <li key={m.id}>{m.content}</li>)}
    </ul>
  )
}

// ✅ 可序列化（可作为 Client Component 的 props）
string, number, boolean, null, undefined
bigint
Date
Array, Map, Set
Plain objects (字面量对象)
Server Components (JSX)
Promises（用于 Suspense）
 
// ❌ 不可序列化（不能作为 Client Component 的 props）
Functions (函数)
Classes (类实例)
Symbols
DOM nodes
Closures (闭包)

// Server Component
export default async function ChatPage() {
  const chat = await getChat()
 
  return (
    <ChatClient
      title={chat.title}           // ✅ string
      messageCount={chat.count}    // ✅ number
      createdAt={chat.createdAt}   // ✅ Date
      messages={chat.messages}     // ✅ Array of plain objects
      onDelete={deleteChat}        // ❌ 函数不可序列化！
    />
  )
}

// Server Component
import { deleteChat } from './actions'
 
export default async function ChatPage() {
  return (
    <ChatClient
      chatId={chat.id}
      deleteChatAction={deleteChat}  // ✅ Server Action 可序列化
    />
  )
}
 
// actions.ts
'use server'
export async function deleteChat(chatId: string) {
  await db.delete(chats).where(eq(chats.id, chatId))
  revalidatePath('/chat')
}
 
// Client Component
'use client'
export function ChatClient({ chatId, deleteChatAction }: Props) {
  return (
    <button onClick={() => deleteChatAction(chatId)}>
      删除
    </button>
  )
}

// ❌ 传递过多数据
<ChatClient chat={fullChatObject} /> // 包含 messages、metadata、relations...
 
// ✅ 只传需要的字段
<ChatClient
  title={chat.title}
  id={chat.id}
  messageCount={chat.messages.length}
/>

// 问题：很多第三方库不导出 'use client'
// 解决：创建包装文件
 
// components/client/recharts.tsx
'use client'
export { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts'
 
// 然后在 Server Component 中使用
import { BarChart, Bar } from '@/components/client/recharts'