App Router에서는 React Suspense와 Error Boundary가 파일 시스템에 기본 내장되어 있습니다. loading.tsx를 추가하면 서버에서 컴포넌트가 완전히 렌더링되기를 기다리지 않고 스켈레톤 UI를 즉시 브라우저로 스트리밍(Streaming)하여 체감 로딩 시간을 극단적으로 줄입니다. 또한 error.tsx를 통해 특정 영역에서 에러가 나더라도 전체 앱이 멈추지 않고, 에러 발생 영역만 교체한 뒤 reset() 함수로 복구를 시도할 수 있습니다.
loading.tsx를 추가하면 서버 컴포넌트가 데이터를 패치하는 동안 스켈레톤 UI를 스트리밍(Streaming)하여 사용자 경험(UX)을 극대화합니다. error.tsx는 특정 컴포넌트 트리에 에러가 발생했을 때 전체 페이지가 다운되는 것을 막고, 해당 부분만 에러 UI로 대체하며 복구(Recover) 버튼을 제공할 수 있습니다.
// ==========================================
// 📂 app/dashboard/loading.tsx
// ==========================================
export default function Loading() {
// 실제 페이지(page.tsx)의 서버 사이드 렌더링이 완료되기 전,
// 브라우저에 즉시 스트리밍(Streaming)되어 체감 속도를 높이는 스켈레톤 UI
return (
<div className="p-4 space-y-4 animate-pulse">
<div className="h-8 bg-slate-200 rounded w-1/4"></div>
<div className="h-32 bg-slate-200 rounded w-full"></div>
<div className="h-32 bg-slate-200 rounded w-full"></div>
</div>
)
}