Suspense와 스트리밍은 먼저 보여줄 껍데기와 나중에 채울 본문을 나눈다
loading.tsx는 React Suspense fallback으로 동작하고, 서버는 준비된 HTML부터 보내 사용자가 빈 화면을 보지 않게 한다.
| 순서 | 서버에서 일어나는 일 | 브라우저에 보이는 것 | 사용자 효과 |
|---|---|---|---|
| 요청 | route segment 렌더링 시작 | 기존 layout 또는 새 layout 껍데기 | 화면이 즉시 반응함 |
| 대기 | page 데이터 fetch가 pending | loading.tsx fallback | 진행 중임을 알 수 있음 |
| 스트리밍 | 준비된 HTML chunk 전송 | 스켈레톤 위에 부분 콘텐츠 추가 가능 | 체감 대기 시간이 줄어듦 |
| 교체 | page.tsx 결과 완성 | fallback 제거 후 실제 콘텐츠 | 대기 화면이 자연스럽게 사라짐 |