느린 서버 영역을 fallback과 함께 독립적으로 스트리밍합니다.
Suspense는 자식이 준비될 때까지 fallback을 먼저 보내고 완료된 내용을 이어서 표시합니다. 중요한 상단 UI를 느린 데이터와 분리할 수 있습니다.
경계를 너무 잘게 나누면 화면이 산만해지고 너무 크게 두면 빠른 콘텐츠도 기다립니다.
fallback은 최종 영역과 크기와 의미가 비슷해야 레이아웃 이동을 줄입니다.
Suspense가 모든 데이터 오류를 처리하지는 않습니다. 오류 경계와 데이터 실패 정책이 별도로 필요합니다.
로컬 프로젝트에서 확인해보세요두 번째 느린 섹션을 다른 Suspense 경계로 추가하세요.
import { Suspense } from "react";
async function SlowSummary() {
await new Promise((r) => setTimeout(r, 600));
return <p>서버 집계: 완료율 72%</p>;
}
export default function Page() {
return (
<main>
<h1>대시보드</h1>
<Suspense fallback={<p>집계 중...</p>}>
<SlowSummary />
</Suspense>
</main>
);
}