로딩 UI 범위

느린 경계 탐색

데이터 fetch가 오래 걸리는 section을 찾아 그 가까운 segment에 fallback을 둔다.

스피너만 띄우기보다 최종 카드와 표의 크기를 흉내 내는 skeleton이 안정적이다.

loading이 끝난 뒤 실패할 수 있는 영역은 error 파일의 복구 범위와도 맞아야 한다.

loading.tsx

자동 fallback 해당 segment와 자식이 준비될 때까지 보여 줄 UI를 제공한다.

파일 위치가 곧 범위다.

Skeleton

공간 보존 최종 콘텐츠 크기를 예측해 layout shift를 줄인다.

실제 정보처럼 보이면 안 된다.

Suspense

부분 대기 컴포넌트 단위로 더 세밀한 fallback을 만들 수 있다.

너무 잘게 쪼개면 복잡하다.

Streaming

먼저 보이는 HTML 서버가 준비된 부분을 먼저 보내 체감 대기를 줄인다.

중요 콘텐츠 우선순위를 정한다.

범위 한 section 로딩 때문에 전체 layout이 사라지지 않는가.

크기 fallback이 최종 콘텐츠와 비슷한 공간을 차지하는가.

복구 로딩 뒤 오류가 나면 사용자가 다시 시도할 경계가 있는가.

app/dashboard/loading.tsx
app/dashboard/projects/loading.tsx
// 느린 영역 가까이에 둔다.