Next.js App Router · Boundary Scope Lab

谁会接住这次延迟与错误?

先选择注入位置,再预测接管者。组件树只在揭晓后标出真正生效的边界,让“同层文件到底包住谁”从记忆题变成一次可验证的推演。

同一 route segment 的组件顺序 layout → template → error → loading → page

边界剖面图

红色是事件源,绿色是最终接管者。

事件源 接管边界

parent segment
父级 loading 备用
父级 error 备用
app/projects/[slug]/ 当前实验 segment
  1. 01 layout.tsx 同段边界之外的共享外壳 边界之外
  2. 02 template.tsx 同样位于 error / loading 之外 边界之外
  3. 03 error.tsx 包住 loading、page 与更深子树 待命
  4. 04 loading.tsx 包住 page、not-found 与更深子树 待命
  5. 05 page.tsx 当前路由的叶子内容 可渲染

选择事件、位置和你的预测,然后揭晓组件树。

当前仍可交互的界面区域

父级导航

位于当前 segment 之外,实验中始终保留。

同层 layout 侧栏

page / 深层子树出问题时仍可操作。

page 内容操作

被回退 UI 接管后暂时不可操作。

尚未模拟:三个区域都可交互。

把实验结果还原成三条工程规则

loading

挂起只影响边界内侧

同段 page 与更深 layout 挂起时,loading 可以立即显示;同段 layout 自己挂起时,本段 loading 无法替它兜底。

error

错误边界也遵守同样层级

本段 error 能接住 page 和后代布局的未捕获异常;同段 layout 抛错会继续向父级 error 冒泡,根布局则由 global-error 负责。

notFound()

资源不存在不是普通崩溃

调用 notFound() 会终止当前 route segment 的渲染并转入 not-found UI,不应把“查不到资源”伪装成通用 error 回退。

HTTP

流式响应的 404 有一个容易忽略的细节

非流式响应可以返回 404;如果响应已经开始流式传输,状态码可能保持 200,但 Next.js 会在返回的 not-found 内容中加入 noindex,避免搜索引擎把该 URL 当成正常页面收录。