Next.js 三大核心概念：客户端组件 / 服务端组件 / 服务器操作 完整总结

一、核心规则（最关键）

1. 仅 .tsx / .jsx 组件文件：默认 = 服务端组件
2. 普通 .ts / .js 文件：无默认运行端，必须写 'use server' 才是服务器操作
3. 客户端组件不能直接嵌套服务端组件，只能通过 children / props 间接使用

二、三者完整对比表

image.png

三、核心定义（极简版）

1. 服务端组件
   • 默认类型，无需标记
   • 运行在服务器，负责渲染页面、读取数据
   • 可嵌套：服务端组件 + 客户端组件
2. 客户端组件
   • 必须顶部写 'use client'
   • 运行在浏览器，负责交互、事件、状态
   • 仅可嵌套客户端组件
3. 服务器操作
   • 必须顶部写 'use server'
   • 运行在服务器，负责数据操作、安全逻辑
   • 可被：服务端组件 / 客户端组件 调用

四、最重要：三者如何互相调用？

1. 客户端组件 → 调用 → 服务器操作
   使用：useActionState
   • 这是 客户端跨端调用服务器操作 的官方机制
   • 作用：提交表单、获取服务器返回状态（错误 / 成功）
   • 只能在 客户端组件 使用

'use client'
import { useActionState } from 'react'
import { createInvoice } from '@/actions'

const [state, formAction] = useActionState(createInvoice, initialState)

2. 服务端组件 → 调用 → 服务器操作
   直接调用！不需要任何 Hook！
   • 服务端组件本身就运行在服务器
   • Server Action 也运行在服务器
   • 直接函数调用 即可

// 服务端组件（默认）
import { createInvoice } from '@/actions'

export default async function Page() {
  // 直接调用！无需 Hook！
  const result = await createInvoice(formData)

  return <div>...</div>
}

✅ 关键结论：服务端组件调用 Server Action 不需要任何 Hook！直接调用即可

2. 服务端组件 ↔ 客户端组件 嵌套规则
   • 服务端组件可放：服务端组件 + 客户端组件 ✅
   • 客户端组件只能放：客户端组件 ✅
   • 客户端组件不能直接 import 服务端组件，必须通过 children 传入 ✅

五、必背 3 句话

1. tsx 组件默认服务端，ts 文件无默认端

2. 客户端管交互，服务端管渲染，服务器操作管数据

3. Server Action 不是组件，是安全的服务器函数