loading.tsx 와 suspense

Next.js에서 서버컴포넌트와 Suspense가 도입되면서 페이지와 컴포넌트 로딩 처리 전략이 달라졌습니다.

정리하면, 전체 페이지 로딩과 부분 UI 로딩을 구분해서 사용하면 최적화된 UX를 제공할 수 있습니다.

1️⃣ loading.tsx – 페이지 단위 로딩 UI

✅ 사용 목적

• 사용자가 페이지를 이동했을 때 전체 페이지가 아직 렌더링 준비가 되지 않은 상황에서 fallback UI 제공
• 페이지 전체가 늦게 준비될 경우 자동으로 Skeleton이나 로딩 메시지 표시

✅ 동작 원리

• Next.js는 페이지 이동 시 최상단 서버컴포넌트가 await API 호출 중이면 자동으로 loading.tsx 렌더링
• 서버에서 HTML을 다 내려주기 전까지 사용자에게 보여줄 UI

✅ 예시

// app/blog/loading.tsx
exportdefaultfunctionLoading() {
return<p>페이지 로딩중...</p>;
}
 
// app/blog/page.tsx
exportdefaultasyncfunctionPage() {
const posts =awaitgetPosts();// 느린 API 호출
return<PostListposts={posts} />;
}

이때 posts가 준비되기 전까지 Next.js가 loading.tsx를 보여줌

✅ 언제 사용?

• 페이지 최상단 서버컴포넌트에서 느린 API 호출이 필수적일 때
• SEO, generateMetadata, 초기 렌더링 시 데이터 필요할 때
• 페이지 전체를 준비하지 않고는 UI를 보여줄 수 없는 상황

2️⃣ Suspense – 컴포넌트 단위 로딩 UI

✅ 사용 목적

• 페이지 전체가 아닌 일부 컴포넌트의 데이터 준비가 늦을 때 fallback UI 표시
• “Skeleton UI”처럼 부분적 로딩 경험 제공

✅ 동작 원리

• 컴포넌트에서 Promise가 throw되면 Suspense가 fallback UI 표시
• Promise resolve 시 해당 컴포넌트만 재렌더링
• 클라이언트/서버 컴포넌트 모두 사용 가능

✅ 예시

<Suspense fallback={<Skeleton />}>
<PostList />  {/* 서버 컴포넌트, 느린 API 호출 */}
</Suspense>

✅ 언제 사용?

• 하위 서버컴포넌트에서 느린 API 호출이 있을 때
• 페이지 상단 UI는 빠르게 보여주고, 일부 데이터만 늦게 보여주고 싶을 때
• 클라이언트 컴포넌트에서도 API 요청이나 lazy 로딩 시

3️⃣ 한눈에 비교

4️⃣ 결론 & 활용 팁

1. 페이지 최상단에서 느린 API 호출 필수 → loading.tsx
2. 하위 컴포넌트에서 부분적 API 호출 → Suspense + Skeleton
3. Suspense와 loading.tsx를 적절히 조합하면
   • 페이지는 빠르게 보여주고
   • 데이터가 준비되는 동안 유저에게 스켈레톤 UI 제공 가능