Routing: Loading UI and Streaming

특별한 파일 loading.js를 사용하면 React Suspense를 활용하여 의미 있는 로딩 UI를 만들 수 있습니다. 이 규칙을 사용하면 라우트 세그먼트의 내용이 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있습니다. 렌더링이 완료되면 새로운 내용이 자동으로 교체됩니다.

Instant Loading States

즉시 로딩 상태는 즉시 네비게이션 시에 표시되는 대체 UI입니다. 스켈레톤 및 스피너와 같은 로딩 인디케이터를 사전 렌더링하거나 향후 화면의 작지만 의미 있는 부분인 커버 사진, 제목 등을 표시할 수 있습니다. 이를 통해 사용자는 앱이 응답 중임을 이해하고 더 나은 사용자 경험을 얻을 수 있습니다.

로딩 상태를 만들려면 폴더 내에 loading.js 파일을 추가하세요.

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

[코드] app/dashboard/loading.tsx

동일한 폴더 내에서 loading.js는 layout.js 내에 중첩됩니다. 이 파일은 자동으로 page.js 파일 및 아래의 모든 자식을 <Suspense> 경계로 감쌀 것입니다.

알아두면 좋은 사실:

• 서버 중심의 라우팅에서도 네비게이션은 즉시 이루어집니다.
• 네비게이션은 중단 가능하며, 다른 라우트로 이동하기 전에 현재 라우트의 내용이 완전히로드 될 필요가 없습니다.
• 새로운 라우트 세그먼트가 로드되는 동안에도 공유된 레이아웃은 상호 작용 가능합니다.

권장 사항: Next.js는 이 기능을 최적화하므로 라우트 세그먼트(레이아웃 및 페이지)에 loading.js 규칙을 사용하십시오.