loading experience
loading.tsx 위치감 설계
fallback 기준은 유지되는 레이아웃과 교체될 콘텐츠를 분리해 사용자가 어느 화면을 기다리는지 드러냅니다.
fallback 적용 흐름
1
라우트 요청
사용자가 /posts/[id]처럼 데이터가 필요한 경로에
들어옵니다.
2
가까운 파일 선택
하위 세그먼트의 loading.tsx가 있으면 상위보다
먼저 사용됩니다.
3
HTML 스트리밍
준비된 레이아웃과 fallback을 먼저 보내 빈 화면 시간을 줄입니다.
4
실제 page로 교체
데이터 준비가 끝나면 fallback 자리에 실제 페이지 콘텐츠가 들어옵니다.
콘텐츠 크기 유지
스켈레톤 높이와 행 수를 실제 카드, 목록, 상세 화면에 가깝게 맞춥니다.
가까운 세그먼트 우선
목록과 상세의 대기 문맥이 다르면 각각의 폴더에 loading 파일을 둡니다.
클라이언트 훅 점검
검색 파라미터 훅이나 브라우저 API가 필요하면 client 경계가 필요합니다.