NextJs error : content does not match server-rendered HTML.

content does not match server-rendered HTML.

문제원인 : Next로 SSR을 하는 도중, 서버에서 던져준 내용이랑 클라이언트 내용이랑 달라서 뜬 경고이다.

While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a feature of React.

This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.

해결책: useEffect, useState로 getStaticProps or getServerSideProps 로 생성 전달된 파라미터를 받아서 사용한다.