시간을 다루다가 hydration 에러가 났다.

시간은 특이하게 서버에서 띄우는 것과 클라이언트에서 띄우는 것이 달랐다.

console.log( today.toLocaleTimeString());
//서버 : 3:46:46 PM
//클라이언트 : 오후 3:46:47

같은 today.toLocaleTimeString()함수인데 콘솔 찍히는 게 달랐다.

Next.js는 서버에서 html렌더링을 한 후에 JS를 입히는 hydration을 한다.

이때 서버에서 렌더링한 것과 클라이언트에서 렌더링한 내용이 달라 다음과 같은 에러가 발생했다.

아주 그냥 난리가 났다.

공식문서에는 이런 hydration에러에 대한 핸들링을 여러개 제시하고 있다. 그 중 지금상황에 속하는 게 있어 해결했다.

바로 timestamp와 같이 어쩔 수 없이 다른 것들은 warning을 띄우지 않게 하는 법이다.

<div className={styles.input} ref={dateRef} suppressHydrationWarning>
     {getPrettyToday()} {getPrettyTime()}
</div>

근본적인 해결책이라 생각하지 않았다.

그래서 서버와 클라이언트의 데이터를 맞춰주기로 했다.