Next.js ‘use client’ 到底加在哪:Server/Client Components 边界与常见报错用 Next.js App Router 写页面,你迟早会撞上这个红屏:Youre importing a component that needs useState. It only works in a Client Component but none of its parents are marked with use client。或者反过来——加了use client后,async组件、直接读数据库的代码全报错。这篇把 Server / Client Components 的边界讲透,让你知道那句use client到底该写在哪一行。默认就是 Server ComponentApp Router 里,所有组件默认是 Server Component,在服务器上运行,输出 HTML 发给浏览器。它们的特点:可以直接async/await,直连数据库、读文件、调后端 API。代码不会打包进客户端 bundle,体积更小、密钥更安全。不能用useState、useEffect、onClick等任何依赖浏览器的东西。// app/page.tsx —— 默认 Server Component,不用写任何标记 async function Page() { // 直接 await 取数据,这段代码只在服务器跑 const posts await db.post.findMany(); return ( ul {posts.map((p) li key{p.id}{p.title}/li)} /ul ); } export default Page;什么时候必须加 ‘use client’一旦组件需要交互性或浏览器 API,就得声明成 Client Component。触发条件基本是这几类:用useState/useReducer/useEffect等 Hook。绑定事件:onClick、onChange、onSubmit。用浏览器 API:window、localStorage、document。用依赖以上能力的第三方库(很多 UI 库、动画库)。use client写在文件最顶部(在所有 import 之上):use client; // 必须是文件第一行(注释除外) import { useState } from react; export default function Counter() { const [n, setN] useState(0); return button onClick{() setN(n 1)}点了 {n} 次/button; }关键心智模型:‘use client’ 标记的是「边界」,不是「单个文件」最大的误区是以为要给每个用 Hook 的组件都加use client。实际上,use client声明的是一个进入客户端的边界:一旦某个文件标了它,这个文件 import 的所有组件、以及它们的子组件,都自动成为 Client Component,不需要每个都再写一遍。// app/dashboard/Panel.tsx use client; import Chart from ./Chart; // Chart 即使没写 use client,也是 Client Component import Filter from ./Filter; // 同理 export default function Panel() { // ... }所以正确做法不是「到处撒use client」,而是把边界尽量往叶子节点推:让需要交互的那一小块是 Client Component,页面的其余部分保持 Server Component。这样打包进浏览器的代码最少。常见报错一:父组件没标记报错:useState only works in a Client Component but none of its parents are marked with use client。原因:你在一个 Server Component(或它的子树)里用了useState。修复——给这个用 Hook 的组件文件顶部加use client。注意是加在用 Hook 的那个组件,不是无脑加到page.tsx。常见报错二:Client Component 里写了 async报错:async/await is not yet supported in Client Components。Client Component不能是async函数,也不能直接await取数据。数据要么在 Server Component 里取好当 props 传进来,要么在 Client Component 里用useEffect fetch(或 React Query 之类)。// ✅ Server Component 取数据,传给 Client Component async function Page() { const user await getUser(); // 服务器取 return Profile user{user} /; // 传 props } // Profile.tsx use client; export default function Profile({ user }) { const [editing, setEditing] useState(false); // 交互在这层 // ... }常见报错三:传了函数给 Client ComponentServer Component 可以给 Client Component 传 props,但props 必须是可序列化的(能 JSON 化):字符串、数字、数组、对象都行。函数、类实例、Date 之外的复杂对象不行:// ❌ 报错:Functions cannot be passed directly to Client Components async function Page() { const onSave () { /* ... */ }; // 这是普通函数,不能传 return Editor onSave{onSave} /; }例外:用use server标记的Server Action可以作为 prop 传给 Client Component(框架会把它序列化成一个可调用的引用)。普通闭包函数则不行。一个实用组合:Server 壳 Client 岛理想的页面结构是——外层 Server Component 负责取数据和布局,把交互塞进一个个 Client「岛屿」:// app/post/[id]/page.tsx —— Server,取数据 async function PostPage({ params }) { const post await db.post.find(params.id); return ( article h1{post.title}/h1 p{post.body}/p LikeButton postId{post.id} initial{post.likes} / {/* Client 岛 */} /article ); } // LikeButton.tsx —— Client,只有这一小块进浏览器 bundle (use client); export default function LikeButton({ postId, initial }) { const [likes, setLikes] useState(initial); return button onClick{() setLikes(likes 1)} {likes}/button; }标题、正文这些静态内容留在服务器渲染,只有点赞按钮的 JS 被下载到浏览器。小结App Router 里默认是 Server Component,能async、直连数据库、不进客户端 bundle。用到useState/事件/浏览器 API 时才加use client,写在文件第一行。use client标记的是边界:被它 import 的子树自动都是 Client,不用逐个写;把边界往叶子推,bundle 最小。三大报错:父组件没标记(给用 Hook 的文件加)、Client 里写async(改成 Server 取数据传 props)、传了普通函数(props 必须可序列化,函数只有 Server Action 例外)。一句话记忆点:服务器当外壳、客户端当孤岛——use client越靠近叶子,打进浏览器的代码越少。