⏳ React Suspense 완전 정리

1️⃣ Suspense란?

React Suspense는

👉 비동기 작업이 끝날 때까지 UI를 “기다리게(pause)” 할 수 있게 해주는 기능이다.

주로 다음 상황에서 사용된다:

데이터 fetching
코드 스플리팅(lazy loading)
서버 컴포넌트에서의 비동기 처리

React에게 이렇게 말하는 개념이다 👇

“이 컴포넌트는 아직 준비가 안 됐어. 준비될 때까지 이 UI를 보여줘.”

2️⃣ Suspense가 등장한 이유

기존 React 비동기 처리 방식의 문제점:

로딩 상태를 컴포넌트마다 직접 관리해야 함
isLoading, error 상태가 여기저기 흩어짐
UI 로딩 흐름이 복잡해짐

if (isLoading) return <Loading />;
if (error) return <Error />;

➡️ Suspense는 비동기 로딩을 React 렌더링 흐름 안으로 끌어들여

UI 로딩을 더 선언적으로 관리하게 해준다.

3️⃣ Suspense 기본 사용법

📌 기본 구조

<Suspense fallback={<Loading />}>
  <MyComponent />
</Suspense>

fallback

→ 비동기 작업이 끝나기 전까지 보여줄 UI
MyComponent

→ 준비가 안 되면 렌더링이 일시 중단됨(Suspend)

4️⃣ React.lazy와 Suspense (코드 스플리팅)

Suspense의 가장 기본적인 활용 예시

import { lazy, Suspense } from "react";
 
const MyPage = lazy(() => import("./MyPage"));
 
function App() {
  return (
    <Suspense fallback={<div>로딩중...</div>}>
      <MyPage />
    </Suspense>
  );
}

동작 흐름

MyPage 컴포넌트를 아직 불러오지 못함
렌더링을 중단(Suspend)
fallback UI 표시
로딩 완료 → 정상 렌더링

➡️ 초기 번들 크기 감소 + UX 개선

5️⃣ 데이터 패칭과 Suspense

❌ 기존 방식

const { data, isLoading } = useQuery(...);
 
if (isLoading) return <Loading />;
return <Content data={data} />;

✅ Suspense 방식

<Suspense fallback={<Loading />}>
  <Content />
</Suspense>

로딩 상태를 컴포넌트 내부가 아닌 Suspense가 관리
컴포넌트는 “데이터가 있다고 가정”하고 작성 가능

➡️ 코드가 훨씬 선언적이고 깔끔해짐

6️⃣ Suspense는 어떻게 동작할까?

React 컴포넌트가 렌더링 중에:

Promise를 throw하면
React는 해당 컴포넌트를 중단하고
가장 가까운 Suspense를 찾는다
fallback을 대신 렌더링한다

Promise가 resolve되면

👉 다시 렌더링 시도 → 정상 출력

7️⃣ Server Components와 Suspense (Next.js)

Suspense는 서버 컴포넌트와 궁합이 매우 좋다.

<Suspense fallback={<Skeleton />}>
  <ProductList />
</Suspense>

서버에서 데이터 fetch 중이면
해당 컴포넌트만 늦게 내려보냄
나머지 UI는 먼저 스트리밍됨

➡️ Streaming SSR의 핵심 요소

8️⃣ Suspense 사용 시 주의점

일반적인 fetch는 Suspense를 자동으로 지원하지 않음
React Query / Next.js App Router 같은

Suspense-compatible 환경에서 진가를 발휘함
에러 처리는 ErrorBoundary와 함께 사용해야 함

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Loading />}>
    <Component />
  </Suspense>
</ErrorBoundary>

✔ 요약

Suspense는 비동기 작업을 렌더링 흐름에 통합하는 기능
로딩 UI를 선언적으로 관리 가능
코드 스플리팅, 데이터 패칭, 서버 컴포넌트에 활용됨
Next.js App Router의 핵심 개념 중 하나

React Suspense 정리하기