Next.js App Router · module graph ledger
客户端边界与浏览器包体实验室
'use client' 划分的是模块图，不是 DOM 颜色。移动边界、改变 import 入口与请求时机，观察哪些模块进入浏览器、哪些留在服务端，以及首屏需要下载和 Hydrate 的成本。
当前挑战1 / 12
已完成0 / 12
边界向下放只让真正需要状态、事件或浏览器 API 的入口成为 Client Component。
沿 import 链核对静态导入会把依赖带进同一客户端图谱；文件数量本身不是包体结论。
slot 不等于 importServer Component 由服务端父组件创建，再作为 children 穿过客户端外壳，仍可留在服务端。
① 编辑模块依赖树
点击节点，再切换边界
SERVER
INITIAL
FIRST VIEW
ON DEMAND
ERROR
ProjectPageSERVER
—
② 浏览器成本即时分析
教学估算，最终以生产包报告为准进入浏览器的模块
为什么会进入
边界与加载诊断
仍在服务端的模块
查看当前代码意图与 slot 结构
CHALLENGE 01
把整页边界向下移
载入题目，修改边界或 import，再核对右侧包体证据。