웹에서 'Hydration 불일치(Hydration Mismatch)'란 무엇인가요?

Q: 웹에서 'Hydration 불일치(Hydration Mismatch)'란 무엇인가요?

서버에서 렌더링한 HTML과 클라이언트에서 렌더링한 결과가 달라 경고나 오류가 발생하는 상태이다 SSR(서버 사이드 렌더링) 프레임워크에서 서버가 생성한 HTML과 클라이언트의 JavaScript가 생성하려는 DOM이 다르면 'Hydration Mismatch'가 발생합니다. 이는 서버/클라이언트 환경 차이(현재 시간, 브라우저 API 사용 등)로 인해 발생하며, React, Next.js 등에서 경고를 표시합니다.

어려움 freeCodeCamp

보기 및 정답

A 서버에서 렌더링한 HTML과 클라이언트에서 렌더링한 결과가 달라 경고나 오류가 발생하는 상태이다

B 서버 하드웨어의 물리적 냉각 수분이 부족하여 과열로 인한 성능 저하가 발생하는 상태이다

C 브라우저의 로컬 캐시에 저장된 데이터와 서버에서 보낸 실시간 응답의 내용이 다른 상태이다

D 서로 다른 두 API 엔드포인트에서 반환하는 응답 데이터의 JSON 스키마 형식이 다른 상태이다

해설

SSR(서버 사이드 렌더링) 프레임워크에서 서버가 생성한 HTML과 클라이언트의 JavaScript가 생성하려는 DOM이 다르면 'Hydration Mismatch'가 발생합니다. 이는 서버/클라이언트 환경 차이(현재 시간, 브라우저 API 사용 등)로 인해 발생하며, React, Next.js 등에서 경고를 표시합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

웹에서 'Hydration 불일치(Hydration Mismatch)'란 무엇인가요?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩