Next.js 캐싱으로 웹 서버 성능 최적화
프론트엔드
Next.js 캐싱으로 웹 서버 성능 최적화
두줄요약
Next.js App Router에서 Full Route Cache를 활용해 상품 목록·상세 페이지의 서버 렌더링 비용을 줄인 사례입니다. 부하테스트에서 TPS를 크게 개선하고 CPU 사용률도 낮췄습니다.
문제 상황
- 신규 커머스 서비스의 SSR 구성에서 오픈 전 부하테스트 TPS가 예상보다 낮은 상태
- 상품 목록·상세처럼 변경이 적고 트래픽이 몰리는 페이지의 서버 렌더링 CPU 부담이 큰 상황
원인 분석
- 서버 렌더링 결과를 매 요청마다 다시 생성해 TTFB와 CPU 사용량이 커지는 구조
- Dynamic Function 사용과 개인화 로직 때문에 Full Route Cache 적용이 어려운 상태
- 캐시 대상과 비대상 페이지를 구분하지 않으면 동일 응답을 내면 안 되는 영역까지 포함될 위험
해결 방법
- 상품 목록·상세 페이지를 캐싱 대상으로 선정하고 ISR 기반 static route로 전환
- generateStaticParams, revalidate 설정으로 Full Route Cache가 동작하도록 조정
- cookies, headers, searchParams 사용처를 정리하고 일부 인증 로직을 클라이언트로 이동
- Header/Footer는 클라이언트 컴포넌트와 placeholder로 전환해 캐시 적용 가능 범위 확보
성능/운영 포인트
- Full Route Cache와 Data Cache 동작 관계 확인 및 next.revalidate 값 정합성 유지
- 캐시 HIT 여부를 확인하는 디버깅 컴포넌트로 운영 검증
- 부하테스트 조건 통제와 정적 리소스 캐싱 병행으로 효과 수치화