AI가 만든 React 화면에서 hydration 오류가 보여요
서버 HTML과 브라우저 첫 렌더링의 입력이 달라 hydration 오류가 발생할 때 원인을 나누는 가이드입니다.
빠른 답변
시간·난수·브라우저 API·사용자별 데이터처럼 서버와 브라우저의 입력이 달라지는 값을 첫 렌더링에서 사용하는지 확인합니다.
- 적용 범위
- 이 가이드의 시작 증상과 각 분기 조건이 일치하는 경우문맥: 바이브 코딩
- 출처
- React
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 대상
- 사이트 운영자, 웹 에이전시, 프리랜서
이 가이드가 맞는 경우
- 애플리케이션 오류 메시지
상황별 다음 단계
호스팅사·개발자에게 전달할 내용
변경 전 기록
- 오류 경로, 서버 응답 HTML, 브라우저 콘솔과 발생 시각을 기록합니다.
- 토큰·쿠키·개인정보는 전달하지 않습니다.
알아둘 점
확인 순서
- 오류가 서버 렌더링·정적 생성·브라우저 첫 렌더링 중 어느 단계에서 발생했는지 기록합니다.
- 렌더 함수에서
window,document,Date,Math.random()을 읽는지 찾습니다. - 서버와 브라우저가 다른 시간·지역·로그인 상태를 첫 화면의 값으로 쓰는지 비교합니다.
- 조건이 일치하면 Hydration failed because the server rendered HTML didn't match the client. 또는 Next.js encountered the unstable value Math.random() while prerendering을 확인합니다.
suppressHydrationWarning을 먼저 추가해 경고를 숨기지 말고 서버 출력과 브라우저 첫 출력의 차이를 기록하십시오.
참고 자료
hydrateRoot | React (새 창에서 열림)
React · 공식 자료 · 확인 범위: 서버에서 생성한 HTML과 브라우저의 첫 렌더링 결과가 같아야 hydration이 완료됩니다. · 확인일: 2026-08-04