5. 로딩 UI 활용하기

로딩 UI는 사용자에게 실시간 피드백을 제공함으로써 현재 작업이 처리되고 있음을 인지시켜줄 수 있음

로딩 시간이 길면 그 자체로도 문제이지만, 로딩 중이라는 안내도 없이 빈 화면을 표시하는 것보단 로딩 UI를 표시하는 것이 UX에 더 좋음

1. loading.js 

Next.js에서는 loading.js라는 특수한 파일 컨벤션을 통해 개발자가 Loading UI를 빠르게 구현할 수 있도록 제공

이러한 Loading 메커니즘은 React의 <Suspense />로 동작함

화면에 표시하기 위한 컨텐츠가 서버로부터 다운로드가 완료되어 렌더링이 처리될 경우, 로딩 UI가 사라지고 실제 컨텐츠가 표시됨

2. Loading UI 구현

Loading UI는 현재 로딩 중임을 표시하기 위해 크게 2가지 방식으로 디자인함

1. 로딩 중임을 표시하는 로딩 스피너(Spinner)
2. 곧 컨텐츠가 표시될 위치와 뼈대를 보여주는 스켈레톤(Skeleton UI)

특정 라우트의 페이지 렌더링 시 표시할 로딩 UI는 해당 경로 내 loading.js 파일에 작성함

localhost:3000/dashboard 경로에 로딩 UI를 적용할 경우, app/dashboard/loading.js 작성

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

export default function LoadingSkeleton() {
	return <div>Loading...</div>
}

구현한 loading.js는 다음과 같이 <Layout />(layout.jsx) 내 <Page />(page.jsx) 부분을 감싸서 적용됨