멜론 커머스, Next.js Full Route Cache로 TPS 6배 향상

멜론 커머스 팀은 신규 서비스 오픈 전 부하 테스트에서 예상보다 낮은 TPS를 확인하고, Next.js의 Full Route Cache를 적용해 서버 리소스를 최적화했습니다. 상품 수가 적고 트래픽이 특정 페이지에 집중되는 커머스 특성을 고려해, 상품 목록과 상세 페이지의 서버 렌더링 결과 캐싱이 가장 효과적이라고 판단했습니다.

캐싱 전략 및 구현

기존 동적 라우팅 구조를 ISR(Incremental Static Regeneration) 기반 정적 라우팅으로 변경했습니다. 이를 위해 cookies, headers 등 Dynamic Function 사용을 제거하고, 인증 로직을 클라이언트 측 AuthProvider로 마이그레이션했습니다. 또한 generateStaticParams를 활용해 다국어 경로와 상품 ID 경로를 정적 경로로 처리했으며, 재고 변경 등 실시간성이 필요한 부분을 제외하고 캐시 유효 기간(revalidate)을 설정했습니다.

성능 개선 효과

적용 전후 부하 테스트 결과, 평균 **TPS(Transaction Per Second)**가 34에서 220으로 약 6배 향상되었습니다. 이는 응답 시간 단축과 CPU 사용률 감소로 이어졌으며, 조건에 따라 최대 10배까지 성능 개선이 확인되었습니다. Next.js 14.0.2 이전 버전의 304 응답 캐싱 버그는 몽키패치로 해결했습니다.