로딩 범위
loading.tsx: 가까운 세그먼트의 대기 화면
fallback을 어디에 둘지 정할 때는 유지되는 레이아웃과 실제로 늦게 도착하는 콘텐츠를 분리해 봅니다.
nearest fallback
skeleton size
stream replace
가장 가까운 파일이 적용
하위 세그먼트에 loading.tsx가 있으면 그 경계의 fallback이 먼저 보입니다.
위치는 유지한다
상위 layout은 남기고 늦는 콘텐츠 영역만 스켈레톤으로 바꾸면 위치감이 유지됩니다.
훅은 지시어 확인
useSearchParams 같은 훅을 쓰면 loading.tsx도 클라이언트 컴포넌트가 되어야 합니다.
01 · 요청
세그먼트 렌더를 시작합니다.
02 · 대기
fallback을 먼저 보입니다.
03 · 스트림
준비된 HTML을 보냅니다.
04 · 교체
완성 콘텐츠로 바뀝니다.
최종 콘텐츠와 크기가 비슷해야 레이아웃 점프가 줄고, 사용자는 기다리는 위치를 잃지 않습니다.