로딩 UI 구현하기

사용자가 페이지에 접속하거나 특정 작업을 수행할 때, 백엔드에서 데이터를 가져오는 데는 시간이 소요될 수 있습니다.

목록과 상세 페이지에 loading.tsx를 추가해 데이터 로딩 중에도 사용자에게 즉시 피드백을 렌더링합니다.

Next.js의 loading.tsx는 내부적으로 React의 Suspense 컴포넌트를 사용하여 구현됩니다.

loading.tsx 파일은 자신이 위치한 라우트 세그먼트와 그 하위의 모든 라우트 세그먼트에 적용됩니다.