Server/Client 边界
page 保持 Server Component 预渲染,交互(搜索/添加)下沉到 Client Component;初始数据以 props 跨越边界
边界对照:Server 外壳 + Client 交互叶子
本组件在服务端渲染并预取数据;下面的列表是 Client Component,水合后接管搜索与添加
online
张明
创始人 & CEO
资深创业者，专注于产品创新与团队建设。拥有10年以上互联网行业经验，曾在多家知名企业担任高管。
12 项目查看详情 →
online
李娜
技术总监
全栈工程师，热爱开源与技术分享。精通React、Node.js、Python等技术栈。
8 项目查看详情 →
away
王强
设计总监
UI/UX设计师，追求极致的用户体验。作品曾获多项国际设计大奖。
15 项目查看详情 →
online
陈静
产品经理
产品思考者，专注于用户需求与商业价值的平衡。
10 项目查看详情 →
offline
刘洋
前端工程师
React专家，热衷于构建高性能用户界面。
6 项目查看详情 →
online
赵雪
后端工程师
架构师，关注系统可靠性与可扩展性。
9 项目查看详情 →
away
孙浩
DevOps工程师
云原生爱好者，致力于自动化与基础设施。
7 项目查看详情 →
online
周琳
数据分析师
数据驱动决策，用数字讲述故事。
5 项目查看详情 →
什么能跨过这条边界
序列化按值走。下面的 Promise 是活的:刷新后会重新等一次
| 值 | 能否交给 Client |
|---|---|
| string / number / boolean / null / undefined、可序列化的普通对象与数组 | Flight 原生支持。上面的用户列表就是这样传进去的 |
| Date、Map、Set、BigInt、TypedArray / ArrayBuffer、RegExp | Flight 原生支持。Date 能传,但跨时区序列化后语义要留心,团队约定传 ISO 字符串也常见 |
| Promise | Flight 原生支持。Client 用 use() 解开,必须有 Suspense |
| 普通函数、类实例、Symbol、WeakMap / WeakSet | 真的不能。要动作就改成 Server Action,或把交互留在客户端 |
服务端的 Promise 还没完成…
什么时候别把边界往上推
'use client' 写在哪一层,直接决定客户端 bundle 大小
- 只有叶子需要交互时,不要把整个页面标成 "use client"——那会把本可静态化的内容全部送进客户端 bundle
- 跨边界传参必须是可序列化数据;想传函数,改用 Server Actions 或把交互整体下移
- Server Component 可以 import Client Component;反过来不行(Client 想嵌 Server,走 children 槽)