React - Hydration failed because the initial UI does not match what was rendered on the server(nextjs-MUI)

next js에서 Hydration failed because the initial UI does not match what was rendered on the server error가 발생한다면...

next js의 장점은 SSR인데 이 과정에서 문제가 되었다. server에서 render가 먼저 되기 때문에 client와 맞지 않은 tag들이 있기 때문이다. 

 

#object

   - Hydration failed because the initial UI does not match what was rendered on the server 에러 해결

 

## 해결

SSR이 될 때 말고 useEffec가 실행이 되고 나서 render를 하게 된다면 다음과 같은 에러가 사라진다. isMouted가 true 일 때만 render가 되도록 설정을 했다.

 

위와 같은 방법으로도 해결이 되지만, 근본적인 원인을 해결하기 위해서는 _app.tsx 와 _document.tsx 에서 setting 할 때부터 설정을 해야한다.

 

### 참조 이전에 작성했었던 글

https://mr-son.tistory.com/116?category=911627 

React - Next - Material ui Warning: Prop className did not match