Next.js ISR + Redis 외부 캐시로 카카오메이커스 이벤트 서비스 고성능화 및 안정화

핵심 기술

카카오메이커스 이벤트 서비스에서 Next.js SSR 적용 시 겪었던 트래픽 폭증 문제를 ISR(Incremental Static Regeneration)과 Redis 외부 캐시 도입을 통해 해결한 사례를 공유합니다. SSR의 장점인 사용자 경험 향상과 서버 부하라는 상반된 문제를 효과적으로 관리하기 위한 기술적 접근 방식을 제시합니다.

기술적 세부사항

• SSR 도입 배경: 이벤트 페이지의 오픈그래프(OG) 대응 및 빠른 화면 로드 시간을 위해 SSR 적용
• SSR 전환 후 문제점: 대규모 트래픽 유입 시 서버 응답 불능 및 서비스 장애 발생 (SSR은 서버 리소스를 크게 요구)
• ISR 도입: Next.js의 Incremental Static Regeneration을 활용하여 캐싱 극대화
  • revalidate 설정을 통한 주기적 캐시 갱신
  • generateStaticParams를 활용한 동적 라우트의 정적 생성
  • Dynamic API(cookies, headers, searchParams) 사용 시 ISR 동작 제약 및 해결 방안 (데이터 분리)
• 캐시 재검증 방식:
  • 시간 기반 재검증 (revalidate)
  • 온디맨드 재검증 (revalidatePath, revalidateTag)
  • 온디맨드 재검증 + Prefetch 로직 구현 (API Router, curl 활용)으로 캐시 무효화 후 즉시 새 데이터 캐싱
• Redis 외부 캐시 도입:
  • PM2 클러스터 모드 환경에서 인스턴스 간 캐시 분리 문제 해결
  • @neshca/cache-handler 라이브러리를 활용하여 Redis를 캐시 핸들러로 설정
  • 분산 환경에서의 캐시 동기화 및 안정적인 HIT 보장
• Next.js 캐시 구조 이해: Router, Cache, Rendering, Storage (In-memory, Disk, Redis/CDN) 개념 설명
• 빌드 결과 확인: SSG(○), ISR(⦁), 동적(ƒ) 라우트 표시
• 운영 환경 캐시 상태 확인: X-Nextjs-Cache 헤더 (HIT, MISS, STALE)
• 보안: 온디맨드 재검증 API 접근 제어를 위한 Nginx 설정

개발 임팩트

• 첫 화면 로딩 시간 단축 및 LCP 개선 (Lighthouse 성능 점수 60점 → 97점)
• 대규모 트래픽 발생 시에도 안정적인 서비스 운영 가능
• SSR의 장점과 서버 부하 간의 트레이드오프 해결
• 서비스 운영 기준 최대치(1개월)로 캐싱 타임 설정 및 하이브리드 전략 구축

커뮤니티 반응

(원문에 직접적인 커뮤니티 반응 언급 없음)