Suspense
Suspense는 비동기 컴포넌트가 로딩될 동안 대체 UI(fallback)를 지정하는 컴포넌트입니다.
App Router에서는 주로 서버 컴포넌트가 데이터를 가져오는 동안 사용합니다.
1
2
3
<Suspense fallback={<div>로딩 중...</div>}>
<UserProfile />
</Suspense>
Suspense 중첩
Suspense 컴포넌트를 여러 개 중첩해서 사용함으로써, 페이지의 각 부분마다 독립적인 로딩 UI(fallback)를 적용하는 기법을 말합니다.
병렬 렌더링
여러 서버 컴포넌트를 동시에 로딩하여 빠르게 보이게
로딩 분리
일부 컴포넌트만 로딩 중이라면, 그 부분만 Skeleton UI를 보여줄 수 있음
실패 방어
하나의 컴포넌트가 에러나 로딩이 걸려도 전체 UI가 멈추지 않음
기본 예시
1
2
3
4
5
6
<Suspense fallback={<SidebarSkeleton />}>
<Sidebar />
</Suspense>
<Suspense fallback={<MainSkeleton />}>
<MainContent />
</Suspense>
- Sidebar, MainContent는 각기 비동기로 로딩
- Sidebar가 느려도 MainContent는 먼저 렌더링