Next.js ISR과 Redis 캐싱으로 SSR 성능 한계를 극복하다!
by DD
8개월 전
조회수 7
Next.js SSR 환경에서 트래픽 폭주로 인한 서비스 장애를 겪음
ISR(Incremental Static Regeneration)과 Redis를 도입하여 TPS 4.6배 향상 달성
Nginx를 활용한 정적 리소스 서빙 최적화로 응답 시간 36% 단축
ISR 동작 원리와 Next.js 캐싱 구조
ISR(Incremental Static Regeneration)은 정적 페이지를 부분적으로 재생성하는 방식이다. 구체적으로, 첫 요청 시 캐싱된 HTML을 반환하고, revalidate 시간이 지나면 STALE 데이터를 반환하며 백그라운드에서 새 HTML을 생성한다. 따라서 SSR의 유연성과 SSG의 성능을 모두 얻을 수 있다.
Redis 도입과 캐싱 전략의 변화
운영 환경에서 인메모리 캐시 분리 문제로 Redis를 도입했다. 따라서 여러 인스턴스 간 캐시 동기화를 통해 STALE 문제를 해결했다. 반면, Redis 사용은 관리 포인트와 비용 증가라는 트레이드오프를 발생시킨다. 결과적으로, 서비스 규모에 따라 적절한 캐싱 전략을 선택해야 한다.
온디맨드 재검증과 Thunder Herd 문제 해결
CMS 수정 시 revalidatePath와 Prefetch를 활용하여 온디맨드 재검증을 구현했다. 구체적으로, API Router를 통해 캐시를 무효화하고, curl을 사용하여 페이지를 미리 로드했다. 하지만, 배포 시 Thunder Herd 문제가 발생하여, generateStaticParams를 활용한 해결 방안을 모색 중이다.
