DEV WIKI
프론트엔드 · 오류·증상

Hydration failed because the server rendered HTML didn't match the client.

서버가 만든 HTML과 브라우저의 첫 React 렌더링 결과가 달라 hydration mismatch가 발생했는지 확인합니다.

빠른 답변

우선 확인할 원인
React hydration mismatch는 서버가 만든 HTML과 브라우저의 첫 렌더링 결과가 다를 때 발생합니다. 시간·난수·브라우저 전용 API·확장 프로그램처럼 서버와 클라이언트의 입력이 달라지는 조건을 먼저 분리합니다.
먼저 확인할 항목
로그 또는 화면에 `Hydration failed because the server rendered HTML didn't match the client.`가 표시되는지 확인합니다.
적용 범위
현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
출처
React
출처 확인일
2026-07-27
최종 검토
2026-07-29
수정일
2026-07-30
오류·수정 제보 (새 창에서 열림)

현재 증상

  • 애플리케이션 오류 메시지

먼저 확인할 항목

로그 또는 화면에 `Hydration failed because the server rendered HTML didn't match the client.`가 표시되는지 확인합니다.

서버 응답 HTML과 브라우저 첫 렌더링에서 시간·난수·지역 설정 값이 달라지는지 확인합니다.

렌더링 중 `window`, `document` 등 브라우저 전용 API를 읽는지 확인합니다.

브라우저 확장 프로그램을 끈 상태에서도 같은 오류가 재현되는지 확인합니다.

피해야 할 조치

주의

  • 경고를 숨기는 옵션을 먼저 적용하지 말고 서버·클라이언트 출력 차이를 기록합니다.
  • 사용자별 데이터나 인증 상태를 서버·클라이언트에서 다르게 읽는 코드를 무작정 지우지 않습니다.

환경별 원인과 조치

확인 방법

  1. 오류 원문과 발생한 URL, 서버 렌더링 여부를 기록합니다.
  2. 서버와 브라우저 첫 렌더링에서 시간·난수·지역 설정·사용자별 값이 다른지 비교합니다.
  3. 렌더링 중 브라우저 전용 API를 호출하는지 확인합니다.
  4. 확장 프로그램을 끈 새 브라우저에서도 같은 결과인지 확인합니다.

서버와 브라우저가 같은 입력으로 첫 화면을 만들지 못하면 hydration이 완료되지 않을 수 있습니다. 원인을 확인하기 전에 경고를 숨기거나 서버와 클라이언트 중 한쪽의 화면을 임의로 고정하지 마십시오.

관찰값 기록

문제가 발생한 URL 또는 화면, 표시 시각, 운영 환경과 최근 변경 사항을 먼저 기록합니다. 화면이나 로그에 오류 문구가 일부만 보이면 앞뒤 문장을 보존하고 비밀번호·토큰·쿠키·개인정보는 가립니다.

다음 항목을 실제 값과 함께 확인합니다.

  1. 로그 또는 화면에 Hydration failed because the server rendered HTML didn't match the client.가 표시되는지 확인합니다.
  2. 서버 응답 HTML과 브라우저 첫 렌더링에서 시간·난수·지역 설정 값이 달라지는지 확인합니다.
  3. 렌더링 중 window, document 등 브라우저 전용 API를 읽는지 확인합니다.
  4. 브라우저 확장 프로그램을 끈 상태에서도 같은 오류가 재현되는지 확인합니다.

판정 기준

오류 문구가 일치해도 같은 원인이 확정되는 것은 아닙니다. 웹서버·런타임·운영체제·플랫폼과 최근 변경 사항을 비교하고, 기대한 관찰값이 나오지 않으면 다음 단계로 넘어가지 않습니다. 이 문서는 출처가 확인한 범위만 설명하며, 범위를 벗어난 원인과 조치는 단정하지 않습니다.

안전한 다음 확인

설정·권한·데이터를 변경하기 전에 백업과 되돌리기 방법을 기록합니다. 운영 환경의 방화벽 전체 해제, 인증서 검증 우회, 데이터 삭제, 비밀값 공개를 기본 조치로 사용하지 않습니다. 확인 결과가 문서의 조건과 다르면 관련 Platform·Component 문서와 공식 출처를 먼저 확인합니다.

참고 자료

Minified React error (새 창에서 열림)

React · 공식 자료 · 확인 범위: hydration-mismatch, server-client-render-difference, development-error-details · 확인일: 2026-07-27