React 19 Suspense 경계 최적화로 LCP 개선하기

문제 상황

사내 대시보드의 LCP가 4.2초로 측정되어 개선이 필요했다. 모든 데이터 fetching을 최상위 Suspense로 감싸면서 critical한 콘텐츠까지 지연되는 구조였다.

React 19 Suspense 개선 사항

React 19에서는 Suspense 경계가 더 세밀하게 동작한다. 특히 형제 컴포넌트 간 독립적인 fallback 처리가 안정화되었다.

// Before: 전체가 한 번에 로딩
<Suspense fallback={<Loading />}>
  <CriticalChart />
  <SecondaryStats />
  <RecentActivity />
</Suspense>

// After: 경계 분리
<Suspense fallback={<ChartSkeleton />}>
  <CriticalChart />
</Suspense>
<Suspense fallback={<StatsSkeleton />}>
  <SecondaryStats />
</Suspense>
<Suspense fallback={null}>
  <RecentActivity />
</Suspense>

적용 전략

1. Critical 콘텐츠 우선 렌더: 차트 데이터만 먼저 fetch하고 표시
2. Non-critical은 lazy: 스크롤 하단 컴포넌트는 fallback=null로 처리
3. Preload 활용: 라우터 레벨에서 critical 데이터 preload

// loader에서 preload
export async function loader() {
  const chartData = fetchChartData();
  // Suspense가 이미 시작된 fetch를 인식
  return defer({ chartData });
}

결과

• LCP: 4.2s → 2.4s (43% 개선)
• FCP는 거의 동일 (Suspense boundary가 빨라서)
• Hydration 오류 없이 안정적 동작

React 19의 Suspense는 이제 프로덕션에서 충분히 신뢰할 수 있는 수준이다. 경계를 어떻게 나누느냐가 성능의 핵심이었다.