Next.js · App Router · 交付实验

RSC 交付调度台

切换一次完整首访和一次客户端导航，逐步观察服务端准备了什么、通道运了什么，以及浏览器何时真正拥有交互。

待命 · 0 / 4

等待首次访问

按“开始演示”自动播放，或按“下一步”逐阶段检查三种交付材料。

服务端

组件装配台 / SERVER

RootLayout（服务器）
ProductPage（服务器）
LikeButton（客户端占位）

等待请求。 尚未开始准备路由结果。

  • 方角纸条：服务器组件在服务端完成渲染工作。
  • 圆点标记：客户端组件会得到占位与对应 JavaScript 引用。

传输通道

轨道 AHTML 待准备
HTML · 可显示票据 首屏非交互预览
轨道 BRSC 载荷待准备
RSC · 结构包裹 渲染结果＋占位＋props
轨道 C客户端 JS 待准备
JS · 激活卷轴 只水合客户端组件

浏览器 · 页面预览

等待 HTML 到达。浏览器里暂时没有可显示的路由预览。

为什么不是只有 HTML

HTML负责快速给出可见预览；RSC还要描述服务器渲染结果、客户端占位、代码引用与跨边界 props，React 才能协调完整组件树。

Client Component 首次也参与预渲染

首次访问时，Next.js 会在服务端用客户端组件参与生成 HTML 预览；“客户端组件”不等于首次只在浏览器运行。

水合只激活客户端组件

客户端 JavaScript 为需要事件和状态的客户端组件绑定交互；服务器组件的结果不因此整体变成浏览器中的交互代码。

等待开始演示。