挂起只影响边界内侧
同段 page 与更深 layout 挂起时,loading 可以立即显示;同段 layout 自己挂起时,本段 loading 无法替它兜底。
Next.js App Router · Boundary Scope Lab
先选择注入位置,再预测接管者。组件树只在揭晓后标出真正生效的边界,让“同层文件到底包住谁”从记忆题变成一次可验证的推演。
同一 route segment 的组件顺序 layout → template → error → loading → page
红色是事件源,绿色是最终接管者。
事件源 接管边界
layout.tsx
同段边界之外的共享外壳
边界之外
template.tsx
同样位于 error / loading 之外
边界之外
error.tsx
包住 loading、page 与更深子树
待命
loading.tsx
包住 page、not-found 与更深子树
待命
page.tsx
当前路由的叶子内容
可渲染
选择事件、位置和你的预测,然后揭晓组件树。
位于当前 segment 之外,实验中始终保留。
page / 深层子树出问题时仍可操作。
被回退 UI 接管后暂时不可操作。
尚未模拟:三个区域都可交互。
同段 page 与更深 layout 挂起时,loading 可以立即显示;同段 layout 自己挂起时,本段 loading 无法替它兜底。
本段 error 能接住 page 和后代布局的未捕获异常;同段 layout 抛错会继续向父级 error 冒泡,根布局则由 global-error 负责。
调用 notFound() 会终止当前 route segment 的渲染并转入 not-found UI,不应把“查不到资源”伪装成通用 error 回退。
非流式响应可以返回 404;如果响应已经开始流式传输,状态码可能保持 200,但 Next.js 会在返回的 not-found 内容中加入 noindex,避免搜索引擎把该 URL 当成正常页面收录。