[NextJS] Hydration error

Hydration failed because the initial UI does not match what was rendered on the server ->

초기 UI가 서버에서 렌더링된 것과 일치하지 않아 수화 실패

즉 Next.js는 SSR(server-side rendering)방식으로 서버에서 렌더링 시키고 브라우저단 CSR(client-side rendering)에서 렌더링된 것 과 일치하지 않아서 발생하는 에러이다.

에러를 해결할 방법으로 React 버전을 17버전으로 다운그레이드하는 방법이 있지만 우선 급한대로 불부터 끄자는 식으로 구글링하여 에러를 없앨 방법을 찾아보았다.

useEffect와 typeof window === 'undefined'를 사용하여 분기를 주고 client에서 실행되게끔 만들기.

export default function App({ Component, pageProps }: AppProps) {

  const [showChild, setShowChild] = useState(false);

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

  if (!showChild) {
    return null;
  }
  if (typeof window === 'undefined') {
    return <></>;
  } else {
    return (
      <>
        <Provider store={store}>
            <GlobalStyles />
            <Component {...pageProps} />
        </Provider>
      </>
    );
  }
}

이방법을 사용하여 급한대로 에러를 없애긴 했지만 해결책이아닌 에러를 건너뛰는 방법이기에 좋지 않다.

다른 방법도 찾아봐야겠다.