프론트엔드
Next.js 트러블슈팅: CORS와 Version Skew 에러 원인부터 해결까지
두줄요약
Next.js SSR 서비스에서 발생한 CORS와 Version Skew 장애의 원인과 해결 과정을 정리했습니다. SessionStorage 저장, dynamic import, 배포 전략 개선으로 문제를 완화했습니다.
문제 상황
- Next.js 기반 SSR 충전 서비스에서 client-side navigation 시 CORS 에러와 Version Skew로 인한 404, 새로고침, 상태 초기화 문제가 연쇄 발생
- 운영 배포와 카나리 구간에서만 재현되는 간헐적 장애로, QA에서는 놓치기 쉬운 낮은 발생률과 특이한 재현 경로가 존재
원인 분석
- 정적 CSS 요청이 fetch 경로와 stylesheet 경로로 각각 다르게 캐시되며, Origin/ACAO 헤더 차이로 CORS 정책 위반 발생
- 배포 중 구버전·신버전 서버가 공존하면서 Next.js의 BUILD_ID가 다른 서버로 라우팅되어 페이지 요청 404와 강제 새로고침 유발
해결 방법
- crossOrigin: 'anonymous'로 모든 정적 리소스를 CORS 요청으로 통일하거나, dynamic import로 문제 페이지를 CSR로 전환해 우회
- Version Skew 대응으로 충전 응답 상태를 SessionStorage에 저장해 새로고침 후에도 상태 유지
- 배포 안정성 강화를 위해 카나리, 블루 그린, Sticky Session 적용 검토 및 도입