Next.js - (8) loading 페이지로 로딩 상태 표시하기

 

2025.05.02 - [FE develop/Next.js] - Next.js - (7) 비동기 작업을 통해 데이터 가져오기

Next.js - (7) 비동기 작업을 통해 데이터 가져오기

 

저번 포스트에서는 Next.js에서 서버 컴포넌트 안에서 async/await를 사용해 데이터를 가져오는 방법을 살펴봤습니다.

하지만 이렇게 데이터를 불러오는 동안 사용자는 아무런 피드백 없이 빈 화면을 보게 될 수 있습니다.

 

이러한 문제를 해결하기 위해 Next.js에서는 loading.js 파일을 통해 로딩 상태를 처리할 수 있습니다.

 

 

✅ loading.js로 로딩 상태 구현하기

// app/meals/loading.js

import classes from "./loading.module.css";

export default function MealsLoadingPage() {
  return <p className={classes.loading}>Fetching meals...</p>;
}

 

✅ 반드시 지켜야 할 규칙

1. 파일명은 반드시 loading.js여야 합니다.
   Next.js가 특별히 인식하는 예약 파일이기 때문입니다.
2. page.js와 같은 디렉토리 내에 위치해야 합니다.
   예를 들어 app/meals/page.js에서 데이터를 패칭하고 있다면,
   해당 로딩 상태는 app/meals/loading.js에 정의해주어야 적용됩니다.
3. 자동으로 레이아웃의 children 자리에 렌더링됩니다.
   page.js가 데이터를 가져오는 동안, 설정된 레이아웃 내에서 loading.js가 대신 보여지게 됩니다.

 

✅ 작동 원리 요약

• page.js에서 비동기 데이터 패칭이 시작되면
• Next.js는 자동으로 같은 폴더 내의 loading.js를 렌더링
• 데이터가 준비되면 page.js로 전환

 

 

데이터 패칭시 loading.js가 나타나는 모습

 

 

 

 

🔍 마무리

Next.js는 서버 컴포넌트에서 데이터 패칭이 가능하기 때문에, 로딩 중 상태를 보여주는 것은 UI/UX 측면에서 매우 중요합니다.
loading.js 파일을 활용하면 간편하게 이러한 경험을 사용자에게 제공할 수 있습니다.