2026. 4. 20. 15:55ㆍFE/Next.js
이번에 스위프 웹 13기를 지원하고, 그 곳에서 따로 프로젝트를 진행하면서 개발 스택을 Next.js로 선택했었다.
그 중 Hydration 개념에 대해 짧게 짚고 넘어갈 필요가 있다는 생각이 들었다.
그렇게 결심을 한 이유 중 하나는
다음과 같은 UI를 퍼블리싱하는 과정에서 생긴 문제였다.
퍼블리싱 자체는 큰 어려움이 없는 UI여서 그냥 이냥저냥 HTML,CSS 개념으로 해결이 되나 싶었지만
느닷 없이 다음과 같은 오류가 발생했다.
요약하자면, 서버에서 랜더링된 HTML과 클라이언트에서 랜더링된 HTML 싱크가 안맞는다는 얘기인데..
자세한 원인을 분석하기 위해 Hydration에 대해 먼저 공부하기로 했다.
강의는 인프런에 있는 정환님 Next.js 한입 강의를 참고했다.
본격적으로 Hydration이란 무엇일지 살펴보도록 하자.
Hydration이 뭔데?
먼저 사전 랜더링이라는 개념에서 시작하는데, CSR인 리액트와는 다르게, SSR 기반인 넥스트는 먼저 서버에서
사전으로 JS를 실행해 랜더링한 HTML을 클라이언트로 보내, 브라우저 화면에 그려내는 작업을 거친다.
이 과정에서 컨텐츠가 브라우저에 나타나긴 했지만, 아직은 서버로부터 HTML만 받은 상황이므로
화면에서 인터렉션이 일어나지는 않는다. (상호작용은 JS로 동작하기 때문이다.)
그래서 서버에서 후속으로 곧바로 JS 번들링 파일을 브라우저에 후속으로 보내준다.
그래서 브라우저는 이 때 받은 JS 코드를 앱에서 실행해, 현재 화면에 있는 HTML 요소들과 연결 시켜주게 된다.
이 과정을 우리는 Hydration(수화)라고 부른다.
그래서 왜 오류가 발생하는데?
간단하게 Next.js 환경에서 클라이언트가 서버에서 랜더링된 HTML을 재사용(hydrate)할 때
서버와 클라이언트와 랜더링 결과가 다를 때 발생하는 오류이다.
이 중에는 비동기 데이터 값, 랜덤 값, 브라우저 API, 시간 등이 있을 수 있다.
우리 상황에서의 원인인 시간 값은 Client-Side에서만 계산하도록 useEffect 안에서 계산하게끔 만들어야 하고
SSR에서 계산 필요 시, getServerSideProps를 이용할 수 있다.
우리는 Server Component에서 날짜 계산할 필요는 없으므로, useEffect로 처리하므로 해결할 수 있다.