Next.js 서버 컴포넌트 문제, props 로그부터 찍자

서버 컴포넌트에서 에러가 나면 브라우저에서는 아무것도 안 보인다. 콘솔에도, 네트워크 탭에도 단서가 없다. 이럴 땐 무작정 UI를 만지지 말고 props부터 확인해야 한다.

먼저: 정상 상태 정의하기

버그를 재현하기 전에 '정상'이 뭔지 명확히 하자. 로컬에서는 OK인데 서버에서만 터지는 건가? 아니면 특정 데이터 조합에서만?

Props와 렌더링 결과를 함께 로깅해두면, 나중에 "어 어제는 안 터졌는데" 하는 상황을 빠르게 판단할 수 있다.

보는 순서

// 1. 컴포넌트 입구에서 props 타입과 값 확인
console.log('Props:', JSON.stringify(props, null, 2))

// 2. 조건부 렌더링이 있다면 실제로 탄 분기 기록
if (!props.data) {
  console.error('Data is missing:', { userId: props.userId })
}

// 3. API 응답 확인 (SSR일 경우)
const data = await fetchData()
console.log('API Response:', JSON.stringify(data, null, 2))

보통은 이 세 군데 중 하나에서 값이 없거나 타입이 잘못돼 있다.

모바일 폭 / 키보드 입력 같은 UI 문제와 분리하기

로그와 UI를 동시에 보려다 보면 혼란스러워진다. 먼저 콘솔로 "데이터는 오나"만 확인하고, 그 다음에 렌더링이 맞는지 본다.

npm run build
# 빌드 성공 → 로그 확인 → 화면 확인

같은 증상이 반복되면 점검표 만들기

한두 번 디버깅하다 보면 패턴이 보인다. "아, 항상 createdAt 필드가 없네" 같은 식으로. 이걸 메모해두면 다음 번에 훨씬 빠르다.

1. Props에서 null이거나 빠진 필드 확인
2. 로그나 응답에서 달라진 부분을 한 문장으로 정리
3. 빌드와 실제 배포 환경 모두에서 재현되는지 확인

마지막으로, 서버 에러는 무조건 로그 먼저다. 화면은 항상 거짓말을 할 수 있지만 콘솔에 남은 값은 사실이다.