피드로 돌아가기
Dev.toFrontend
원문 읽기
TTFB 최대 90% 단축을 위한 Suspense 기반 Progressive Rendering 설계
Part I: Don't Wait for Data. Render What You Know.
AI 요약
Context
전통적인 SSR 방식의 모든 데이터 Fetching 완료 후 응답하는 구조로 인한 렌더링 병목 현상 발생. Auth, UserDetails, Chats 등 다수 API 호출이 직렬 또는 병렬로 묶여 전체 페이지 렌더링을 지연시키는 구조적 한계 직면.
Technical Solution
- 데이터 중요도에 따른 렌더링 계층 분리를 통한 Shell 우선 렌더링 구조 설계
- Auth 등 필수 데이터만 Blocking 처리하여 TTFB 최적화 및 즉각적인 HTML Shell 전송
- React Server Components 및 Suspense 도입을 통한 각 컴포넌트 단위의 독립적 데이터 Fetching 구현
- renderToPipeableStream을 활용한 HTML 스트리밍으로 데이터 준비 완료 시점에 맞춰 점진적 UI 업데이트 수행
- Error Boundary를 각 Suspense 영역에 배치하여 API 실패 시 전체 페이지 크래시를 방지하는 격리 구조 채택
- 부모 컴포넌트의 데이터 중앙 집중형 구조에서 컴포넌트 자체 데이터 소유 모델로 전환
실천 포인트
1. 페이지 내 데이터 간 의존성을 분석하여 Critical Path(Auth 등)와 Non-critical Path(Content 등) 구분
2. Next.js App Router의 async Server Components를 활용해 데이터 Fetching 주체를 컴포넌트 레벨로 하향 조정
3. 모든 Suspense Boundary에 대응하는 Skeleton UI와 ErrorBoundary를 쌍으로 구성하여 예외 처리 최적화
4. BFF 레이어에서 HTTP Streaming 적용 가능 여부를 검토하여 프레임워크 의존성 제거 고려