[next.js 공식문서] 05. Loading UI

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Loading UI

인스턴스 로딩 상태

스켈레톤이나 스피너와 같은 로딩 표시기나 표지 사진, 제목등을 미리 렌더링 할 수 있음.

loading.tsx

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

같은 폴더에서 loading.js는 layout.js 안에 중첩됨. page.js 파일과 그 아래의 모든 하위 파일을 <Suspense> 경계로 감쌈.

• 탐색은 서버 중심 라우팅에서도 즉각적임
• 네비게이션은 중단 가능
• 공유 레이아웃은 새 경로 세그먼트가 로드되는 동안 유지됨

서스펜스 경계 수동 정의

리액트의 fallback 활용

<Suspense fallback={<Loading />}>
    <SomeComponent/>
</Suspense>