loading.tsx를 사용하면 Suspense로 의미 있는 로딩 UI를 만들 수 있다. 이 규칙을 사용하면 Route Segment의 콘텐츠가 로드되는 동안 서버에서 즉각적인 로딩 상태를 표시할 수 있다. 랜더링이 완료되면 새 콘텐츠가 자동으로 교체된다.
즉시 로딩 상태
즉시 로딩 상태는 탐색 시 즉시 표시되는 fallback이다. 스켈레톤, 스피너와 같은 로딩 표시기를 미리 랜더링하거나 표지 사진, 제목 등과 같이 향후 화면에서 작지만 의미 있는 부분을 미리 랜더링할 수 있다. 이를 통해 사용자가 앱이 반응하고 있음을 이해하고 더 나은 사용자 경험을 제공 할 수 있다. 폴더 내에 loading.tsx 파일을 추가하여 로딩 상태를 생성한다.
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}
사용 방법
loading.tsx가 있고, page.tsx에서 API를 호출하면 page.tsx는 laoding.tsx로 대체된다. page.tsx에서 API를 직접 부르지 않고, API를 호출하는 여러 개의 서버 컴포넌트를 Suspense로 감싸면 스트리밍이 된다. API 요청이 먼저 끝난 서버 컴포넌트부터 차례로 화면에 표시된다.
loading.tsx가 있고, page.tsx 안에 API를 호출하는 여러 개의 서버 컴포넌트가 있지만 Suspense를 사용하지 않으면 전체 서버 컴포넌트가 준비될 때까지 page.tsx가 loading.tsx로 대체된다. Suspense를 사용했지만 fallback을 설정하지 않았을 경우, Suspense 내부의 컴포넌트가 준비될 때까지 해당 영역이 빈 상태로 남아있는다.
레이아웃에서 로딩 처리하기
레이아웃에서 발생한 로딩은 같은 경로의 loading.tsx 로 처리되지 않는다. 이는 레이아웃과 같은 형제 경로의 중요한 UI가 로딩과 상관없이 계속 표시되도록 설계된 것이다. 레이아웃에서 발생한 로딩을 처리하려면, 해당 레이아웃을 감싸는 상위 경로에 loading.tsx 파일을 추가해야 한다.
