Hydration mismatch는 왜 발생하고 어떻게 해결할 수 있나요?

Hydration mismatch는 SSR로 생성된 HTML과 클라이언트에서 React가 처음 렌더링한 결과가 다를 때 발생합니다. 시간, 랜덤 값, 브라우저 전용 API, 사용자 환경에 따라 달라지는 값이 원인이 되며, 서버와 클라이언트의 초기 렌더 결과를 같게 만들거나 클라이언트 전용 로직을 effect 이후로 미루는 방식으로 해결합니다.

핵심 개념

핵심 기준은 서버 HTML과 클라이언트 첫 렌더 결과 일치입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

서버에서 만든 HTML과 클라이언트 첫 렌더 결과가 달라지는 상황을 떠올려보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

SSR 페이지에서 서버가 2026-05-21 10:00을 렌더링했는데 클라이언트가 즉시 10:01을 렌더링하면 React는 같은 DOM이라고 확신할 수 없습니다.

실무에서 적용하는 방법

초기 렌더에 시간, 랜덤 값, localStorage 값을 직접 넣지 말고 effect 이후 상태로 반영하거나 서버에서 동일한 값을 주입합니다.

실무에서 주의할 점

• suppressHydrationWarning은 임시 회피 수단일 뿐이며 구조적 불일치를 감추는 데 남용하면 안 됩니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

프론트엔드, SSR, Hydration, React

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, Hydration mismatch는 SSR로 생성된 HTML과 클라이언트에서 React가 처음 렌더링한 결과가 다를 때 발생합니다입니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.