loading state map
loading.tsx는 빈 화면 대신 가까운 세그먼트의 대기 상태를 보여준다
App Router는 비동기 데이터가 준비되기 전 가장 가까운 loading.tsx를 fallback으로 렌더링하고, 데이터가 오면 page.tsx로 바꾼다.
posts/loadingposts 목록과 하위 세그먼트의 기본 대기 UI
[id]/loading상세 페이지에 더 가까운 fallback
layout.tsx유지되는 껍데기와 위치감
비동기 대기
fetch나 서버 컴포넌트 작업이 아직 끝나지 않는다.
가까운 fallback
현재 세그먼트와 가장 가까운 loading.tsx를 보여준다.
스트리밍
레이아웃은 유지하고 준비된 HTML부터 사용자에게 보낸다.
page로 교체
데이터가 준비되면 fallback 영역을 실제 콘텐츠로 바꾼다.
설계 지점좋은 기준문제 신호
위치대기 상태를 보여줄 page와 같은 세그먼트에 둔다.너무 상위에 두어 범위가 넓어짐
형태실제 콘텐츠 크기와 비슷한 스켈레톤을 둔다.로딩 후 레이아웃이 크게 흔들림
상태 문구무엇을 불러오는지 짧게 알려 위치감을 준다.빈 화면이거나 의미 없는 spinner만 보임
검증Network throttling으로 느린 환경에서 실제 표시 여부를 본다.로컬에서는 너무 빨라서 놓침
가까운 파일이 이긴다
하위 세그먼트 loading.tsx가 있으면 더 구체적인 대기 UI가 적용된다.
공간을 미리 잡는다
최종 콘텐츠와 비슷한 크기를 잡아 CLS를 줄인다.
모든 지연을 숨기진 못한다
느린 API 원인은 별도로 줄이고 loading은 피드백 역할로 본다.