nextjs hydration failed because the initial ui...

| 서버사이드 렌더링시에는 스토리지에 접근할 수 없어서 window 객체가 undefined인지를 체크하는 코드가 있습니다. 자세한건 코드를 봐야 알 수 있지만 위에 언급해주신 부분 때문에 에러가 발생하는 것 같습니다. 서버사이드에서 함수가 실행되면서 window 객체가 없기 때문에 null 또는 <></> 값을 리턴해주고 있다면 서버에서 보내준 값 null or <></> 클라이언트에러 렌더링 하는 jsx태그 ex) <div>hello</div> 두 태그가 상이해서 발생하는 에러입니다. 이슈 해결하려면 window가 undefined일 때 리턴해주던 조건을 컴포넌트가 마운트 됐을 때로 변경하면 단편적으로 해결할 수 있습니다.(이건 SSR의 이점을 가져갈 수 없음) 근본적인 해결책은 아니기 때문에 클라이언트에서 로그인여부를 체크하는 HOC를 걷어내고 서버에서 체크할 수 있도록 serverSide 함수안에 정보를 넣어주면 될 것 같습니다. Next.JS hydration키워드로 검색해보면 서버사이드 랜더링 태그가 어떻게 리엑트 태그와 결합되는지 자세하게 알 수 있습니다!

next.js에서는 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이 모두 지원되기 때문에, 어떤 부분에서 발생한 오류인지 정확히 파악해야 합니다. initial ui does not match what was rendered on the server 에러는 일반적으로 서버사이드 렌더링과 클라이언트사이드 렌더링의 결과물이 다른 경우 발생합니다. 즉, 서버에서 렌더링한 결과와 클라이언트에서 렌더링한 결과가 일치하지 않는 경우 발생하는 에러입니다. withAuthRoute 컴포넌트에서 window 객체를 사용하는 부분이 클라이언트사이드에서만 작동하도록 분기 처리를 해보시는 것이 좋을 것 같습니다. 예를 들어, 아래와 같이 window 객체가 있는지 검사하고, 있다면 해당 코드를 실행하도록 처리해보세요. 이렇게 처리하면 서버사이드 렌더링시에는 해당 코드 블록이 실행되지 않고, 클라이언트사이드에서만 실행되어 초기 렌더링과 이후 렌더링이 동일한 결과를 보이게 할 수 있습니다.

1if (typeof window !== 'undefined') {
2  // window 객체가 존재하는 경우
3  // 스토리지 접근 등 클라이언트사이드에서만 필요한 코드 작성
4}