Next.js AI 工作台水合预算：收紧 Client 边界与初始 JavaScript

AI 工作台常把会话树、模型选择、文件面板、Markdown 渲染器和编辑器包进一个顶层 'use client' 页面，理由是“里面有输入框”。在 Next.js App Router 中，这条指令声明客户端模块图边界，其 imports 和子组件会进入客户端 bundle；服务端已经生成 HTML，不代表浏览器无需下载、执行并水合这些模块。Next.js Server Components 深度解析 介绍架构，本篇针对仓库当前 Next.js 16.2.6 制定性能合同。

边界清单先于代码分割

逐项标注首屏组件为何需要客户端：编辑器需要状态和事件，停止按钮需要交互，尺寸测量需要浏览器 API；静态标题、已完成消息正文、账户说明和服务端取数本身不需要。页面与布局保持 Server Component，把最小的 ComposerIsland、RunControls 和确实需要局部状态的组件设为 Client Component。Server Component 可以作为 children 传入客户端外壳，不应为了视觉嵌套把整棵静态树改成 client。

传给 Client Component 的 props 必须可序列化，并只包含首屏交互所需字段。不要把完整模型目录、所有历史消息 AST 或服务端 SDK 配置塞进 RSC payload。富文本编辑器、图表和高级文件预览用 next/dynamic 在用户打开时加载；Next.js 16.2.6 文档明确指出懒加载作用于 Client Components，Server Components 默认会代码分割。ssr: false 只能在 Client Component 中使用，也不能拿它掩盖 hydration 不一致。React 代码分割 的通用原则在这里要以实际路由 chunk 为证据。

两套数字约束冷启动

构建门读取同一生产构建的路由资产清单，记录 AI 路由首次加载的 JS 文件、原始字节、压缩字节和依赖归属。初始路由 JS 压缩后先设 180 KiB 上限，同时不得比已批准基线增长 5%；两个条件取更严格者。共享框架 chunk 单独列出但不能在前后报告中随意排除。动态编辑器必须不在冷启动请求中，并在打开后只下载一次。

浏览器门用清空缓存的新 profile，重放 50 条已完成消息和一个空编辑器，在批准的中档移动设备或固定 4 倍 CPU、下行 1.6 Mbps、往返 150 毫秒条件下运行 30 次。要求 LCP P75 不超过 2.5 秒；编辑器从 navigation start 到可输入并完成下一次绘制的 P75 不超过 2 秒；水合阶段超过 50 毫秒的主线程任务不多于 2 个；首次点击停止按钮的 Event Timing duration P75 不超过 200 毫秒；recoverable hydration error 为 0。Event Timing observer 显式设置 durationThreshold: 16，只保留 interactionId > 0，并对同一 interaction 取最大 duration 后再汇总，不能使用默认阈值下的原始 event 条目。实验室预算与 Core Web Vitals 的线上分位数分开保存，不能用一次 Lighthouse 分数替代。

instrumentation-client.ts 在 HTML 加载后、React hydration 前执行，适合建立 ai_boot_start 和轻量 PerformanceObserver。Next.js 16.2.6 开发环境会在其中的初始化超过 16 毫秒时警告，因此这里只登记 mark 与 observer，监控 SDK 动态延后。编辑器组件在 layout effect 后登记 composer_ready，自动化立即 focus、输入并等待 paint，再计算真实可操作时间；load 事件或 hydration 猜测时间都不够精确。Web 性能 RUM 用相同字段采样线上设备。

可复现地找到越界 import

基准分别执行直接访问、同站路由导航和浏览器后退，保存 Network、Performance trace、脚本 coverage 与构建摘要。故意把 Markdown 高亮器导入 ComposerIsland，测试必须看到初始 JS 与 parse/compile 时间上升；改为用户打开预览后动态导入，冷启动不得请求该 chunk。再注入服务端与客户端不同的默认模型，门禁必须捕获 hydration 错误，不能以 suppressHydrationWarning 通过。

流式 Server Component 的 Suspense 边界还要预留稳定 fallback 尺寸，避免内容替换制造 CLS；LCP 元素不应藏在慢边界内。Next.js 的流式 HTML 与客户端 token 流是两条链路，后者仍按 Next.js AI 流式响应治理 处理连接生命周期。边界变小也不代表所有高频回答都应由服务器重新发送 RSC payload。

发布时保存 route-performance-manifest.json 的构建摘要、chunk 列表和批准阈值。先让 1% 新会话使用窄边界，按浏览器、设备内存和导航类型比较初始 JS、composer ready、INP、水合错误；旧会话不在中途交换组件图。若初始 JS 增长超过 5%、composer ready P75 退化 20%、出现 recoverable hydration error 或动态 chunk 失败率超过 0.5%，部署上一份构建并关闭边界开关。回滚必须恢复匹配的 HTML、RSC payload 与客户端 chunk，不能只回退一个懒加载文件。

延伸阅读

• Next.js Server Components 深度解析
• React 代码分割
• Core Web Vitals
• Web 性能 RUM