Next.js SSR, 정말 써야 할까? ISR 부하 테스트 결과 공개!
Next.js SSR은 SEO, 초기 로딩에 유리하지만, 서버 부하를 증가시킴
Artillery를 활용한 부하 테스트 결과, ISR이 SSR보다 압도적인 성능을 보임
ISR은 평균 응답 시간 17배, p95 응답 시간 43배 단축, 안정성 확보
SSR은 사용자별 맞춤 페이지 및 SEO 최우선인 경우에만 고려
SSR과 ISR의 작동 방식 비교
SSR은 요청 시마다 서버에서 HTML을 생성하여 사용자별 맞춤 페이지에 적합하다.
단점: 트래픽 증가에 따른 서버 부하 증가 및 응답 시간 증가
ISR은 정적 HTML을 캐싱하고, 설정된 주기에 따라 백그라운드에서 페이지를 재생성한다.
장점: 정적 페이지의 성능과 서버 렌더링의 유연성을 동시에 제공
재검증 시점에만 서버 렌더링을 수행하여 서버 자원 효율적 사용
Artillery를 활용한 부하 테스트
Artillery는 Node.js 기반의 오픈소스 부하 테스트 도구로, YAML 설정 파일을 통해 HTTP 요청 부하를 시뮬레이션한다.
테스트 환경: Next.js 16 (App Router), Vercel, MongoDB Atlas
테스트 시나리오: 상품 상세 페이지에 대한 GET 요청 반복
측정 지표: 평균 응답 시간, p95 응답 시간, 최대 응답 시간, 요청 처리 속도, 실패 요청
SSR과 ISR의 성능 차이를 객관적으로 비교 분석하여, SSR의 성능 한계를 명확히 보여준다.
SSR vs ISR: 성능 비교 분석
부하 테스트 결과, ISR은 SSR 대비 압도적인 성능 우위를 보였다.
평균 응답 시간: ISR 3.4ms vs SSR 59.2ms (약 17배 차이)
p95 응답 시간: ISR 4ms vs SSR 172.5ms (약 43배 차이)
요청 처리 속도: ISR 60 req/sec vs SSR 31 req/sec (약 2배 증가)
SSR은 일부 요청에서 타임아웃 발생, ISR은 모든 요청을 안정적으로 처리
결과적으로, SSR은 트래픽이 증가할수록 성능 저하가 심화되는 반면, ISR은 안정적인 성능 유지가 가능하다.
SSR 사용 시 고려 사항
SSR은 특수한 상황에서만 제한적으로 사용하는 것이 바람직하다.
SSR 적합 조건: 사용자별 HTML 내용 상이, 최신 데이터 필수, SEO 중요, 트래픽 적음, 캐시 전략 적용 어려움
SSR 활용 예시: 실시간 데이터, 권한 기반 콘텐츠, 개인화된 금융 페이지
ISR/CSR 권장: 상품 상세 페이지, 콘텐츠 페이지, 마케팅 페이지
SSR은 정합성 및 개인화가 최우선인 경우에만 고려해야 하며, ISR/CSR을 먼저 검토해야 한다.
SSR의 함정: 비용과 가치
SSR은 강력한 기술이지만, 서버 자원 소모가 크고 복잡도를 증가시킨다.
SSR의 단점: 서버 부하 증가, 개발 및 운영 비용 증가
ISR/CSR의 장점: 성능 향상, 비용 절감, 개발 편의성 증대
SSR은 기본값이 아닌, 최후의 선택지에 가깝다.
ISR, CSR을 먼저 고려하고, SSR은 정말 필요한 경우에만 신중하게 적용해야 한다.
