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

즉시 로딩 상태

즉시 로딩 상태는 탐색 시 즉시 표시되는 폴백 UI입니다. 스켈레톤, 스피너와 같은 로딩 인디케이터를 미리 렌더링하거나 표지 사진, 제목 등과 같이 향후 화면에서 작지만 의미 있는 부분을 렌더링할 수 있습니다. 이를 통해 사용자가 앱이 반응하고 있음을 더 이해해고 더 나은 사용자 경험을 제공할 수 있습니다.

폴더 내에 loading.js 파일을 추가하여 로딩 상태를 생성합니다.

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

같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 파일은 자동으로 <Suspense> 바운더리로 감싸집니다.

Good to know

• 서버 중심 라우팅을 사용하더라도 내비게이션이 즉시 실행됩니다.

  <aside> 💡 (다른 페이지로 이동하려고 할 때, 서버 응답을 기다릴 필요 없이 즉시 페이지 전환 가능하다는 뜻?)

  </aside>