Next로 개발을 하다보면, 다음의 오류 문구를 개발도중에 많이 볼 수 있어요.

서버에서의 렌더링 결과물과 클라이언트에서의 렌더링 결과물이 일치하지 않아서 위의 오류가 발생하는데요.

하이드레이션이란 간단하게 설명하면 "이벤트 핸들러 함수들" 을 정적인 DOM 노드들에 붙여서 동적으로 상호작용이 가능하도록 바꾸어주는 기능입니다.

서버는 클라이언트가 아닙니다. 다른 시간대나, 날짜, 브라우저에서만 사용할 수 있는 API의 경우 하이드레이션 오류를 충분히 유발할 수 있습니다.

function LastUpdated() {
  const date = getLastUpdated()
  return <span>Last updated at: {date.toLocaleDateString()}</span>
}

위 코드를 보겠습니다. 서버와 클라이언트 간의 locale이 다른 경우, 날짜가 한쪽에서는 "21/02/2024"로, 다른 쪽에서는 "2/21/2024"로 렌더링될 수 있습니다.

(코드가 실행되는 환경의 locale에 따라 달라짐)

이러한 불일치가 발생하면, React는 사용자에게 최상의 사용자 경험을 제공하기 위해 서버 렌더링 결과와 클라이언트 렌더링 결과가 정확히 일치해야 하므로, 사용자에게 경고합니다.

하지만 앞서 살펴본 date.toLocaleDateString같은 API를 사용하는 경우, 이러한 불일치는 필연적입니다.

그럼 어떻게 해결할 수 있을까요?

첫번째 방법으로는 suppressHydrationWarning을 단순히 태그에 넣어주는 방법이 있습니다.

그러나 공식문서에 따르면, 해당 속성을 남용하지 말라고 되어있습니다.