Suspense란?React Suspense

Suspense란?

컴포넌트가 데이터나 코드를 기다리는 동안 fallback UI를 보여주는 React 선언적 래퍼다.

<Suspense fallback={<Spinner />}>
  <SlowComponent />
</Suspense>

활용

• Lazy loading — React.lazy()로 코드 스플릿
• Data fetching — Server Components, Relay
• Streaming SSR — 빠른 부분 먼저 보내고 느린 부분 나중에

Next.js App Router

loading.tsx 파일이 자동으로 Suspense boundary로 작동. Server Components 스트리밍에 필수.