웹 개발
캐시 배포 후 데이터가 사라졌을 때
Next.js 배포 후 페이지가 제대로 렌더링되지 않거나 데이터가 빠져 있을 때 확인하는 순서를 정리했다.
Next.js 배포 후 캐시 관련 문제가 생기면, 로컬에서는 잘 작동하지만 운영 환경에서 일부 데이터가 사라지거나 오래된 콘텐츠가 나타나는 현상이 발생할 수 있다. 이런 경우 어떤 부분을 어떤 순서로 확인해야 하는지 정리해봤다.
먼저 확인할 것
공개 URL과 로컬 환경 중 어디가 문제인지 파악하는 게 핵심이다. 화면을 눈으로만 보고 판단하면 놓치는 게 많으니 로그와 응답 헤더까지 확인해야 한다.
curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
위 명령으로 HTML head의 메타데이터가 제대로 들어가 있는지 확인한다. canonical이 이상하거나, og:image가 빈 경우가 많다.
다음으로 확인할 부분
HTML head는 정상인데 캐시에 문제가 있다면, 빌드 결과를 확인해야 한다.
npm run build
빌드 로그에서 오류가 나왔는지, 특정 페이지가 statically generated되지 않았는지 확인한다. 만약 "Generating static pages"에서 특정 경로가 빠져 있다면 그게 원인일 가능성이 높다.
환경 차이 체크
로컬과 운영의 환경 변수가 다르면 렌더링 결과도 달라진다. .env 파일에서 빠진 변수가 있는지, 특히 API 엔드포인트나 데이터 소스 경로가 다르지 않은지 확인한다.
최종 확인
- 공개 URL에서 새로고침 후 같은 문제가 반복되는지 확인
- 브라우저 캐시를 비운 후 (또는 시크릿 창으로) 다시 접속
- CDN 캐시가 있다면 무효화(purge) 실행
작은 확인이 쌓이면 원인을 찾기가 훨씬 쉬워진다. 한 번에 여러 설정을 바꾸지 말고, 각 단계마다 결과를 기록해두는 습관이 중요하다.