프론트엔드
Next.js 캐싱으로 웹 서버 성능 최적화
두줄요약
Next.js Full Route Cache 적용을 위해 상품 페이지를 ISR 기반 정적 경로로 전환했습니다. 평균 TPS를 34에서 220으로 높이고 CPU·응답시간을 개선했습니다.
문제 상황
- Next.js App Router 기반 SSR 커머스 서비스의 오픈 전 부하 테스트에서 낮은 TPS 확인
- 상품 수가 적고 특정 상품 목록·상세 페이지로 트래픽이 집중되는 서비스 특성
원인 분석
- 서버 렌더링 과정의 높은 CPU 리소스 사용
cookies,headers,searchParams등 Dynamic Function 사용으로 Full Route Cache 미적용- 개인화 데이터가 포함된 Header·Footer의 정적 렌더링 제약
해결 방법
generateStaticParams와 ISR로 상품 목록·상세 페이지를 static route로 전환- 쿼리 파라미터 기반 태그 필터를 path parameter로 변경하고 서버 인증 전처리를 클라이언트
AuthProvider로 이동 - 모든
fetch의next.revalidate설정,revalidate지정, 개인화 Header·Footer의 클라이언트 전환과 Placeholder 추가
성능/운영 포인트
- Full Route Cache와 Load Balancer의 정적 리소스 캐싱 적용 후 평균 TPS 34에서 220으로 개선
- Data Cache 만료 뒤 첫 요청에서 stale 응답 반환 가능성 및
revalidatePath기반 즉시 무효화 주의 - Next.js 14.0.2 이전 standalone 빌드의 304 응답 무한 캐싱 버그 몽키패치
