Next.js 개발 시 자주 마주치는 Hydration 에러 이해하기

Next.js 환경에서 개발을 하다보면 Hydration에러를 종종 만나게 되는데요. 이 에러는 서버에서 생성된 HTML과 클라이언트에서 생성되는 HTML간에 불일치가 발생할때 발생합니다.

가령 useEffect내 API호출을 한다던지, 세션이나 쿠키 같은 요인에 따라 렌더링 컴포넌트가 다를때라던지, 자바스크립트 실행 타이밍이 다를때 이 에러를 접하게 되는데요.

이 Hydration에러는 왜 발생하는 것일까요??

근본적인 원인은 렌더링을 두 번 하기 때문입니다. 서버 사이드 렌더링 후, 클라이언트 사이드에서 추가 렌더링을 하면서 데이터의 불일치가 발생하는 것인데요. 

그럼 왜 렌더링을 두 번 할까요? 언뜻 보기엔 두 번 렌더링이 비효율적인것 같아 보이는데요. 두 번 렌더링을 하게 되면 최초 초기 로딩 시 최소한의 정보만을 포함하고 있어 빠르게 렌더링이 가능합니다. 또한 검색엔진은 빠른 렌더링을 중요한 랭킹 요소로 고려하므로 SEO에도 유리 합니다. 초기 렌더링 이후에는  DOM 요소에 속성을 매칭 시키는 작업을 하는데요. 이 이벤트 리스너를 붙이는 작업은 페이지를 다시 그리지 않으므로 추가적인 렌더링 비용이 발생하지 않습니다.

따라서, Hydration은 효율적인 초기 페이지 로딩과 동적 웹 애플리케이션 기능의 균형을 맞추기 위한 과정 입니다. 다만 Hydration 에러는 개발 과정에서 다루기 까다로운 문제중 하나인데요. Next.js 에서도 에러를 줄이기 위한 방안을 지속적으로 모색하고 기술적인 접근을 제공하고 있습니다. 예를 들어 Zustand에서는 과거에 persist미들웨어를 사용할때 Hydration에러가 발생하였는데요 V3부터는 클라이언트 측에서 상태를 다시 로드하도록 하여 서버와 클라이언트 사이의 데이터 불일치 문제를 해결하였습니다. 

Hydration 과정과 이로 인해 발생할 수 있는 에러를 제대로 관리하면, 사용자 경험을 향상시키고 웹사이트의 성능을 최적화할 수 있습니다.