Next.js 的客户端组件和服务端组件讲解

文章目录一、什么是 Server Component二、什么是 Client Component三、Server Component 与 Client Component 的区别四、嵌套规则1. Server Component 可以嵌套 Client Component ✅2. Client Component 不能嵌套 Server Component ❌五、为什么不能在 Server Component 里直接使用 Client Hook六、最佳实践在Next.js 15 的 App Router中React 组件分为Server Component服务端组件和Client Component客户端组件注意区分这两者的细节。一、什么是 Server Component默认组件类型App Router 下app/目录里的组件默认都是Server Component。运行环境在服务端执行Node.js可直接访问数据库、文件系统、环境变量等。特点不会打包到浏览器体积小。不可使用 React Hook如useState,useEffect。可直接渲染 HTML首屏渲染快SEO 友好。示例// app/page.js (Server Component)exportdefaultfunctionPage(){returnh1Hello from Server Component/h1;}二、什么是 Client Component显式声明在组件文件顶部添加use client;运行环境在浏览器端执行可响应用户交互使用 React Hook。特点可使用useState,useEffect,useContext等 Hook。体积较大会被打包到客户端 JS。适合处理按钮点击、表单、动画等动态交互。示例use client;import{useState}fromreact;exportdefaultfunctionCounter(){const[count,setCount]useState(0);returnbutton onClick{()setCount(count1)}Count:{count}/button;}三、Server Component 与 Client Component 的区别特性Server ComponentClient Component默认✅ 默认❌ 必须use client执行位置服务端Node.js浏览器可访问数据库 / secrets✅❌ 不安全React Hooks❌✅首屏渲染性能高较低JS 加载打包体积小大SEO优差需客户端渲染四、嵌套规则1. Server Component 可以嵌套 Client Component ✅常见模式页面或布局为 Server Component局部组件为 Client Component。// app/page.jsimportCounterfrom./Counter;// Counter 是 Client ComponentexportdefaultfunctionPage(){return(divh1Server Component/h1Counter//div);}注意:Server Component 嵌套 Client Component时必须通过 import 引入成组件。不能直接写在Server Component里。Server/Client 嵌套示意Page (Server) ├─ Header (Server) ├─ Counter (Client) ← 用 useState / useEffect └─ Footer (Server)2. Client Component 不能嵌套 Server Component ❌原因浏览器无法执行 Server Component 的服务端逻辑。如果尝试 import Server Component会报错Error: Server component imported into a client component解决方法将被嵌套组件改成 Client Component或将 Server Component 提取到父组件。五、为什么不能在 Server Component 里直接使用 Client HookServer Component 运行在服务端不存在浏览器环境。React HookuseState,useEffect只能在客户端执行。强制要求要使用 Hook必须在 Client Component 里。错误示例exportdefaultfunctionPage(){const[count,setCount]useState(0);// ❌ 报错returnbutton onClick{()setCount(count1)}{count}/button;}六、最佳实践尽量保持页面和布局为 Server Component提升首屏渲染速度减少 JS 包体积。交互、状态管理、浏览器 API 组件用 Client Component例如按钮计数器、表单、动态列表、动画。嵌套规则Server Component → Client Component ✅Client Component → Server Component ❌数据获取在 Server ComponentServer Component 可直接调用数据库 / fetch API将数据传给 Client Component 只做渲染和交互。布局优先 Server页面整体布局尽量 Server Component仅在局部需要交互的地方使用 Client Component。页面和 Header、Footer 由服务端渲染。Counter 组件在浏览器端处理点击和状态。保持 Server Component 不直接依赖 Client Hook。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目