loading.tsx는 Suspense fallback과 스트리밍을 route 파일로 연결한다
느린 데이터 화면을 만들 때 loading.tsx, page.tsx, layout.tsx의 책임을 나누면 빈 화면 없이 전환할 수 있다.
| 파일/개념 | 맡는 일 | 사용자가 보는 것 | 설계 기준 |
|---|---|---|---|
| layout.tsx | 공통 껍데기와 위치감 유지 | 내비게이션, 사이드바 | 이동 중 남아야 하는 UI |
| loading.tsx | Suspense fallback 제공 | 스켈레톤 또는 대기 문장 | 느린 page 영역과 같은 모양 |
| page.tsx | 실제 데이터와 최종 화면 렌더 | 완료된 콘텐츠 | fallback이 사라질 자리 |
| Streaming | 준비된 HTML을 먼저 전송 | 부분적으로 빠르게 표시 | 서버 작업을 기다리는 동안 반응 유지 |
| Client Hook | 브라우저 값이 필요한 fallback | 검색어 포함 로딩 문구 | 필요한 경우에만 client |