Next.js App Router 里的 loading 和 error 边界习惯
· 阅读需 2 分钟
loading/error 边界 这件事在 2023 年开始越来越频繁地进入真实项目,但很多团队一开始只看到表面收益,没有先把边界收住。只要 每个子路由都各自弹 loading,用户只会觉得页面一直在闪,问题就会很快从“一个小体验瑕疵”变成系统性的维护成本。
我现在更倾向的做法,是先把这类能力当成正式工程问题来看,而不是把它当成一个临时技巧。对我来说,最关键的一步通常是 把 loading 和 error 放在真正有业务意义的路由层级,而不是见一个组件包一个,因为只有边界先明确,后面的优化、扩展和排查才不会一直漂。
真正容易被忽略的,往往不是功能能不能做出来,而是以下这些细节:
- 先决定用户最需要在哪一层看到等待状态
- 错误边界最好贴近功能模块,而不是全局兜底一个大红屏
- 层级越多越要控制文案和交互的一致性
这些细节看起来都不大,但它们决定了系统是在 demo 阶段“能跑”,还是进入业务以后依然稳定。越是和 AI、工作流、构建链路这类复杂能力相关,越不能靠感觉把事情糊过去。
小结
App Router 给了更多边界能力,也要求我们更主动地设计边界。loading 和 error 收得好,页面才显得从容。
