[Next.js] 에서 Unhandled Runtime ErrorError: Text content does not match server-rendered HTML.See more info here: https://nextjs.org/docs/messages/react-hydration-error

 

오류상황

 더미데이터 생성 디펜던시 @faker-js/faker 를 사용한 후 아래와 같은 오류가 발생했다.

(faker는 사용하면 안됩니다..!)

 

 

Text가 서버랜더링 때와 일치하지 않는다는 뜻 같았다. 비슷하게 css로도 해당 오류를 본 적이 있었고, fakerjs 홈페이지에 해결방법이 있었다.

 

해결방법

faker.seed(123);

faker를 수행하는 코드부분 위쪽에  .seed 함수를 먼저 불러주면 되는데, 공식문서 설명으로는 일관된 결과를 유지해 주는 함수라고 적혀져있다. 그 덕분에 서버랜더링 이후에도 오류가 발생하지 않는 것같다.

 

123말고 문자열을 적어봤는데 다시 오류가 떠서.. 숫자를 해봤더니 숫자는 괜찮더라. (시퀀스 느낌이라 그런가?)

무튼 그냥 공식문서 샘플대로 123을 적어두는게 좋을 것같다.

 

 

참고:

- https://fakerjs.dev/guide/usage.html