← 전체 글로 돌아가기

웹 개발

캐시가 꼬였을 때 문제 해결 기준

Next.js 캐시 문제는 운영 중에 작은 이상 신호도 빨리 분리해서 봐야 한다.

캐시가 문제일 때는 보통 어디서부터 시작해야 할지 불명확하다. 중요한 건 웹 렌더링 전체 흐름을 따라가면서 한 단계씩 확인하는 것이다.

처음 보이는 증상부터 기록하기

캐시 주변 문제가 반복되면 확인 순서를 고정해두는 게 좋다. 감으로 접근하면 같은 실수를 반복한다.

원인을 나누는 기준 정하기

중요한 건 캐시 자체보다 재현 가능한 단서를 남기는 것이다. 공개 URL을 확인하면 다음으로 봐야 할 범위가 줄어난다.

  • 먼저 볼 값: 공개 URL
  • 비교할 값: 정상 상태의 웹 렌더링
  • 남겨둘 기록: 명령 출력, 응답 코드, 수정한 설정

Canonical과 메타데이터 확인하기

정상 상태를 먼저 정해두는 게 좋다. 그래야 HTML 헤더가 맞게 렌더링되는지 빠르게 판단할 수 있다.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

명령어로 직접 확인하는 방법

정상 상태를 먼저 정해두면 메타데이터가 제대로 생성되는지 빠르게 판단할 수 있다.

빌드 로그 해석하기

정상 상태를 먼저 정해두는 게 좋다. 그래야 캐시가 제대로 작동하는지 빠르게 판단할 수 있다.

최종 검증 체크리스트

  1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
  2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해본다.
  3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

마지막 점검

Next.js 관점에서는 캐시 자체보다 재현 가능한 단서를 남기는 게 중요하다. sitemap/RSS를 확인하면 다음으로 볼 범위가 줄어난다. 한 번에 여러 설정을 바꾸지 않는 것만으로도 원인 추적이 쉬워진다.