Next.js 트러블슈팅: CORS와 Version Skew 에러 원인부터 해결까지

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 기반 SSR 프론트엔드 개발자, 배포 및 트러블슈팅 담당자

핵심 요약

• CORS 에러 원인: fetch 요청 시 캐시된 stylesheet 응답의 Vary: Origin 헤더 누락으로 인한 CORS 정책 위반
• 해결책: next.config.js에 crossOrigin: 'anonymous' 옵션 적용 또는 dynamic import로 CSR 전환
• Version Skew 해결: 카나리 배포와 블루 그린 배포 병행, 카나리 비율 조정으로 버전 혼합 최소화

섹션별 세부 요약

1. 문제 발생 배경

• Next.js(v13, Pages Router) 기반 SSR 사용, 초기 로딩 속도 최적화 목적
• 충전 완료 화면에서 chargeResponse가 비어 있을 경우 Sentry 로깅 설정
• 운영 환경 배포 후 Sentry 알람 폭발적 발생, 4번의 에러 반복 발생

2. CORS 에러 분석

• CSS 파일 요청 시 Origin 헤더 포함 여부 차이로 인한 캐시 문제
• fetch 요청 시 Vary: Origin 헤더 누락 → CORS 정책 위반
• CDN 서버에서 Vary: Origin 헤더 추가 불가능 → crossOrigin: 'anonymous' 옵션 적용

3. Version Skew 문제

• 롤링 배포 시 구버전 서버가 신버전 진입점 요청 처리 실패 → 404 에러 발생
• 카나리 배포 시 1% 비율로 버전 혼합 → 트래픽 분산으로 문제 완화
• 블루 그린 배포와 카나리 배포 병행으로 롤백 효율성 확보

결론

• CORS 해결: crossOrigin: 'anonymous' 또는 dynamic import로 CSR 전환
• Version Skew 대응: 카나리 배포 비율 조정 및 블루 그린 전략 적용
• 배포 안정성 강화: Canary + Blue-Green 전략 병행, 실시간 모니터링 필수
• Next.js v13 Pages Router 사용 시 SSR/CSR 혼합 구조 주의 필요