N+1 쿼리 제거 및 다층 캐싱으로 로드 시간 70% 단축

Context

Next.js와 Supabase 기반 애플리케이션의 비효율적인 데이터 패칭과 캐싱 전략 부재로 인해 LCP 3.8s, 초기 로딩 4.2s의 성능 저하 발생. 특히 Client-side fetch 남발과 N+1 쿼리 구조에 따른 DB 부하가 주요 병목 지점으로 식별됨.

Technical Solution

• N+1 쿼리 해결을 위해 개별 fetch 방식에서 Supabase Join 쿼리로 전환하여 DB 호출 횟수를 51회에서 1회로 최적화
• 외래 키 및 정렬 기준 컬럼에 Index를 생성하고 Full-text search를 위한 GIN Index를 도입하여 쿼리 응답 속도 개선
• Next.js Data Cache(force-cache)와 ISR(revalidate)을 조합한 정적/동적 데이터 캐싱 전략 수립
• React cache 함수를 통한 단일 요청 내 중복 쿼리 제거 및 Vercel CDN의 s-maxage 설정을 통한 Edge 캐싱 구현
• Client Component 최소화 및 서버 중심 렌더링 구조 전환을 통한 JavaScript Bundle 크기 감소 및 TTI 개선

Impact

• 페이지 로드 시간: 4.2s → 1.3s (70% 단축)
• Lighthouse 성능 점수: 62 → 96
• LCP: 3.8s → 1.3s (65% 개선)
• DB 쿼리 횟수: 50% 감소 및 개별 쿼리 속도 850ms → 12ms로 단축

Key Takeaway

데이터 패칭의 복잡도를 O(N)에서 O(1)로 낮추는 쿼리 최적화가 성능 개선의 최우선 순위이며, 데이터의 성격(정적/동적)에 따른 다층 캐싱 전략(L1-L3)이 인프라 부하를 결정함.