피드로 돌아가기
Dev.toFrontend
원문 읽기
Static Shell과 Dynamic Stream 결합으로 LCP 단축 및 UX 최적화
Beyond SSR vs SSG: Partial Prerendering (PPR) Explained with a Real-World Story
AI 요약
Context
SSG의 데이터 최신성 결여와 SSR의 느린 First Paint 사이의 트레이드오프 발생. CSR 도입 시 발생하는 Layout Shift와 Spinner 과다 노출로 인한 사용자 경험 저하가 주요 병목 지점으로 분석됨.
Technical Solution
- Build time에 정적 콘텐츠를 Pre-render하여 CDN을 통해 즉시 제공하는 Static Shell 구조 설계
- React Suspense를 활용하여 동적 데이터 영역을 'Holes'로 정의하고 런타임에 개별 스트리밍
- Streaming Rendering 기법을 통한 서버 응답 시간과 클라이언트 렌더링 시점의 분리
- Skeleton UI 배치를 통한 공간 확보로 동적 콘텐츠 주입 시 Layout Shift 방지
- 데이터 의존성에 따라 렌더링 단위를 세분화하여 백엔드 지연이 전체 페이지 차단으로 이어지지 않도록 설계
실천 포인트
1. 페이지 내 정적 콘텐츠와 동적 콘텐츠의 경계를 명확히 구분했는지 검토
2. React Suspense와 Fallback UI를 통해 동적 영역의 Layout Shift 방지책 마련
3. CDN 캐싱이 가능한 Static Shell 영역을 최대화하여 First Paint 속도 최적화