[NEXTJS] 서버사이드 렌더링시 발생하는 html 매칭 문제

Warning: Expected server HTML to contain a matching <div> in <p>.

 

이 에러는 서버사이드 렌더링 시의 html과 클라이언트 사이드 렌더링 시의 html이 일치하지 않아서 발생하는 에러로 추측된다.

그래서 실제로 브라우저의 쿠키를 삭제하면 해당 에러가 발생하지 않는다는 것을 확인할 수 있었다.

해결방안

1. 브라우저 쿠키 삭제
   브라우저의 쿠키를 삭제해서 html을 아예 새롭게 렌더링하면 해당 에러가 발생하지 않습니다. 브라우저가 기억하고 있는 html이 없기 때문입니다. 다만 계속 테스트를 하면서 작업을 할 때는 브라우저의 쿠키를 계속 삭제한다는 게 번거롭기 때문에 다음과 같이 코드를 추가해 해당 문제를 해결했습니다.
2. useEffect를 사용해서 렌더링 후 상태 업데이트
   useEffect를 사용해서 렌더링 후 상태를 업데이트 해주는 것입니다. 사실 이 경고가 뜬다고 해서 작업을 하는데 문제가 있다거나 하지는 않습니다. 다만 작업 중 계속해서 콘솔에 뜨는 경고를 제거하고 싶을 때 이 방법을 사용하면 됩니다.

const [mounted, setMounted] = useState<boolean>(false);

useEffect(() => {
  setMounted(true);
}, []);

return (mounted && <...>)