[Next.js] loading.js에 대해서 알아보자

loading.js를 활용하면 React Suspense를 사용하여 의미 있는 로딩 UI를 생성할 수 있습니다.

이 컨벤션을 통해 서버에서 콘텐츠가 로드되는 동안 즉각적인 로딩 상태를 표시할 수 있으며, 렌더링이 완료되면 새로운 콘텐츠로 자동으로 교체됩니다.

(컨벤션이란? 관습, 조약, 규약 등의 뜻을 가집니다.)

 

즉각적인 로딩 상태

즉각적인 로딩 상태는 탐색 직후에 바로 보여지는 대체 UI입니다. 스켈레톤이나 스피너 같은 로딩 지시자를 사전 렌더링하거나, 향후 화면의 중요한 부분(예: 커버 사진, 제목 등)을 작게나마 의미 있게 표시할 수 있습니다. 이는 사용자가 앱이 반응하고 있음을 이해하는 데 도움을 주고 사용자 경험을 향상시킵니다.

 

로딩 상태는 폴더 내에 loading.js 파일을 추가함으로써 생성할 수 있습니다.

 

export default function Loading() {
  // 로딩 내에는 스켈레톤을 포함한 어떤 UI도 추가할 수 있습니다.
  return <LoadingSkeleton />
}

동일한 폴더 내에서, loading.js는 layout.js 내에 중첩되며 <Suspense> 경계 안에 page.js 파일 및 그 아래의 자식들을 자동으로 감싸게 됩니다.

 

• 서버 중심 라우팅에서도 탐색은 즉시 이루어집니다.

• 탐색은 중단 가능하여, 한 루트의 콘텐츠가 완전히 로드되기를 기다리지 않고 다른 루트로의 이동이 가능합니다.

• 새로운 루트 세그먼트가 로드되는 동안 공유 레이아웃은 계속 상호 작용 가능합니다.

 

추천 사항

Next.js는 loading.js를 최적화하므로 컨벤션을 사용하는 것이 좋습니다.

 

• loading.js사용은 즉각적인 로딩 UI를 구현하여 사용자 경험을 향상시킵니다.

• 즉각적인 로딩 상태는 스켈레톤이나 스피너를 포함할 수 있습니다.

• 구현방법은 loading.js 파일을 추가하여 간단한 UI 컴포넌트를 반환하는 방식으로 구현합니다.

• 중간 가능한 탐색은 콘텐츠 로딩을 기다리지 않고도 다른 페이지로 빠르게 전환할 수 있습니다.

• loading.js는 Next.js 프로젝트의 최적화에 도움이 됩니다.