🧨 리액트 에러 발생

댓글을 쓰고 나면 백그라운드에서 On-Demand Revalidation으로 ISR을 진행하게 해둔 SSG 사이트에서 새로고침할 때 리액트 에러가 발생했다.

#425 에러

Text content does not match server-rendered HTML.
컨텐츠가 서버에서 렌더링된 HTML과 일치하지 않아서 발생하는 오류

#418 에러

Hydration failed because the initial UI does not match what was rendered on the server.
초기 UI가 서버에서 렌더링된 것과 일치하지 않아 Hydration에 실패해서 발생하는 오류

#423 에러

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
hydrating 중 오류 발생: 해당 오류가 서스펜스 경계를 벗어나 발생했기 때문에, 전체 루트가 클라이언트 렌더링으로 전환됨

🔧 에러 해결하기

댓글을 쓰고 나면 백그라운드에서 On Demand On-Demand Revalidation으로 ISR을 진행하게 해뒀고, 댓글을 쓰면 정적 사이트가 생성된다.

🧐 문제 발견

• 사이트가 정적으로 생성될 때, 댓글을 작성한 시간이 몇 초 전으로 생성된다. 소스코드를 확인해 보면 초기 값이 몇 초 전으로 사이트가 생성된 것을 확인할 수 있다.
  

• 하지만 시간이 지날 수록 n분 전, n시간 전, n일 전, n달 전, n년 전으로 시간은 바뀐다. 페이지를 새로고침 해 보면 아래 처럼 댓글의 시간 부분이 반짝이는 것을 확인할 수 있다.
  

이 에러는 서버에서 사이트 정적 생성시 생성된 초기 시간과 현재 표시되는 시간이 다르기 때문에 발생하는 에러이다.

✅ 문제 해결

다른 방법도 많지만 내가 맞닥뜨린 에러의 경우 시간 표시 문제이기 때문에 간단한 방법을 사용하여 해결했다.
시간이 표시되는 컴포넌트에 suppressHydrationWarning={true}를 prop으로 주면 불가피하게 발생하는 time stamp에 대한 mismatch 경고를 피할 수 있다.

📚 참고

📝 nextjs 공식 문서: Text content does not match server-rendered HTML
📝 화해 기술 블로그: React의 Hydration mismatch 알아보기
📝 사툰사툰 블로그: Hydration Error: Minified React Error 해결하기