← 전체 글로 돌아가기

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 피드도 생성된다. 이들이 제대로 나오는지 확인하자.

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

운영하면서 배우기

다음에 비슷한 증상이 나오면, 지금 기록한 값과 비교하면 된다. 경험이 쌓이면서 문제 해결 속도는 자동으로 빨라진다.