Next.js + react-countdown: 'Text content did not match' error

Next.js 기반 프로젝트에서 countdown을 표시하는 요소를 구현하는데, 아래와 같은 에러가 자꾸 발생했다.

React에서 SSR을 사용할 경우 서버에서 보내는 데이터와 클라이언트에 표시되는 데이터가 상충하여 발생하는 에러다. (공식 문서에 더 자세한 설명이 있다.)

위 에러를 해결하기 위해서 표시되는 데이터가 다를 수 있는 요소의 suppressHydrationWarning 옵션을 해제하거나, useEffect를 이용하여 DOM이 완전히 그려진 후 변동된 데이터를 표시하도록 하는 방법이 있었다.(관련 Github 이슈)

내가 에러를 겪는 프로젝트에서는 react-countdown 모듈을 사용하여 지속적으로 카운트가 1초씩 변하는 요소를 그려주고 있었다. 해당 요소에 suppressHydrationWarning 프로퍼티를 true로 적용해서 에러를 표시하지 않도록 했다.

<span suppressHydrationWarning>{days}d</span>
<span suppressHydrationWarning>{hours}h</span>
<span suppressHydrationWarning>{minutes}m</span>
<span suppressHydrationWarning>{seconds}s</span>