Next.js
Next.js에서 서버 렌더링만 실패할 때 확인 순서
로컬에서는 잘 되지만 서버에서만 터지는 문제는 대부분 메타데이터나 canonical 설정이 원인이다.
Next.js로 만든 서버가 갑자기 렌더링 에러를 내면, 운영 중에는 빨리 찾아서 고쳐야 한다. 작은 이상 신호도 빨리 분리해서 봐야 한다.
웹 렌더링의 흐름을 끊어서 보기
HTML head가 애매하면, 다른 부분을 고쳐도 결과가 안 바뀐다. 먼저 메타데이터 구조를 확인하자.
Next.js에서 먼저 제외할 원인들
화면만 보고 판단하면 놓치는 게 많다. 다음을 하나씩 확인해 보자:
- 먼저 볼 값: metadata와 canonical이 올바른가?
- 같이 비교할 값: 정상 상태의 웹 렌더링 결과
- 남겨둘 기록: 빌드 로그, HTTP 응답 코드, 수정 내역
canonical과 메타데이터 확인하기
공개 화면에 뭐가 보이는지 확인하는 가장 빠른 방법은 이렇다:
curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build
이 명령으로 제목, 설명, canonical 링크, OG 태그, Twitter 메타데이터를 한 번에 볼 수 있다.
정상 상태를 정의하기
어떤 상태가 정상인지 미리 정해 두면, 캐시된 버전과 새 버전을 빠르게 비교할 수 있다.
Sitemap과 RSS도 함께 보기
단순히 한 페이지만 렌더링되는 게 아니라, sitemap과 RSS 피드도 생성된다. 이들이 제대로 나오는지 확인하자.
- 원래 증상이 같은 조건에서 다시 나는지 확인한다.
- 로그나 응답에서 바뀐 부분을 한 줄로 설명해 본다.
- 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.
운영하면서 배우기
다음에 비슷한 증상이 나오면, 지금 기록한 값과 비교하면 된다. 경험이 쌓이면서 문제 해결 속도는 자동으로 빨라진다.