N+1 쿼리 및 번들 최적화로 로드 시간 73% 단축 (4.2s → 1.1s)

Context

개별 컴포넌트 단위의 파편화된 데이터 요청으로 인한 N+1 Query 문제 발생. 847KB에 달하는 과도한 JS Bundle Size와 최적화되지 않은 이미지 리소스가 초기 렌더링 병목을 유발한 구조.

Technical Solution

• Supabase Nested Select 구문을 활용해 47개의 DB Call을 3개로 통합한 Data Fetching Consolidation 수행
• 데이터 성격(Static, Semi-static, Dynamic)에 따른 3단계 Caching 전략 수립 및 Realtime Subscription을 통한 Smart Invalidation 구현
• Moment.js, Lodash 등 대형 라이브러리를 date-fns, lodash-es 등 Tree-shaking이 가능한 경량 라이브러리로 교체하여 Bundle Size 최적화
• Supabase Image Transformation API와 Next.js Image 컴포넌트 결합 및 Intersection Observer 기반 Lazy Loading 적용
• Connection Pooling 활성화를 통한 Peak-time Timeout 해결 및 Database Connection 효율화
• Server-side Rendering의 오버헤드를 방지하기 위해 초기 구조만 SSR로 처리하고 데이터는 Client-side Cache로 하이드레이션하는 Hybrid 전략 채택