Next.js: Loading и error UI — ментальная модель

Question

Accepted Answer

`loading.tsx` и `error.tsx` — file-based Suspense и error boundaries для segment: slow → fallback stream; throw → catch без падения surrounding layout.

## Разбор

Sugar над React primitives:

| File | Compiles to | Catches |
|---|---|---|
| `loading.tsx` | `}>` around the page | pending async renders |
| `error.tsx` | a React Error Boundary around the page | thrown errors during render |
| `not-found.tsx` | the boundary for `notFound()` | the "no such resource" case |
| `global-error.tsx` | boundary for the **root layout** itself | errors even the root can't survive |

**Boundary wraps `page`, sits *inside* `layout`.** Page suspends/throws — layout (nav, sidebar) **stays on screen**, только page area → fallback/error. Graceful degrade vs white screen.

## Итог

Convention files = automatic boundaries; layout persistence — главная UX-выгода loading/error UI.

File	Compiles to	Catches
`loading.tsx`	`}>` around the page	pending async renders
`error.tsx`	a React Error Boundary around the page	thrown errors during render
`not-found.tsx`	the boundary for `notFound()`	the "no such resource" case
`global-error.tsx`	boundary for the root layout itself	errors even the root can't survive