Next.js: Loading и error UI — компромиссы и trade-offs

File-based boundaries — zero boilerplate и route-aware: streaming loading states и error handling без ручной провязки Suspense/ErrorBoundary.

Разбор

• Trade-off — грубость: loading.tsx показывает один fallback на весь segment.
• Для granular UX — inline <Suspense>. Обёртка отдельных slow components: быстрые части страницы сразу, skeleton только у медленного widget — лучше perceived performance, чем blanking всего route.
• Когда НЕ добавлять error.tsx везде: boundary с «что-то сломалось» на каждом уровне — шум. Ставьте там, где есть осмысленное recovery или сообщение; остальное пусть bubble к higher boundary.

Итог

loading.tsx/error.tsx — быстрый старт; для fine-grained UX комбинируйте с inline Suspense и осмысленным размещением error boundaries.