에러 내용
Next에서 user 정보를 가져오는 부분을 구현할때 hydration 에러가 났다.
리액트에서 하던대로 해서 에러가 생길거라고 생각하지 않았는데 왜
document, window를 사용하지 않아서 더욱이 왜 에러가 나는지 알지못했다
단순히 div, span 관련 에러라고 생각했지만 Next라서 생기는 에러였다.
Hydration 에러는 주로 Next.js와 같은 프레임워크에서 발생하는데, 이는 서버에서 렌더링된 HTML과 클라이언트에서 초기 렌더링된 HTML이 일치하지 않을 때 발생한다. 내가 사용한 useAuthStore 훅은 클라이언트에서만 사용할 수 있는 상태를 관리하는 이기에 서버 측 렌더링 시에는 문제가 될 수 있다.
해결방법
isMounted 넣음
클라이언트 사이드에서만 특정 코드를 실행하기 위해서 isMounted를 넣어주었다.
Next 같은 프레임워크에서는 컴포넌트가 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)에서 모두 렌더링된다.
const [isMounted, setIsMounted] = useState<boolean>(false);
useEffect(() => {
setIsMounted(true);
}, []);컴포넌트가 클라이언트 측에 마운트된 후에 isMounted 상태를 true로 설정햔다.
useEffect는 클라이언트에서만 실행되기 때문에, 서버 사이드 렌더링 중에는 isMounted가 false로 유지된다.
useEffect로 컴포넌트가 마운트되었는지 확인하고, isMounted 상태를 사용하여 클라이언트에서만 렌더링되도록 하게 했다.
해결!
Mounted를 넣고 새로고침을 하면 화면 깜빡이는 문제가 또 생겨서 이건 고정할 수 없다고 하셔서 컴포넌트가 마운트되기 전에는 "로딩중" 메시지 추가하였다.
