Next.js 13 - Warning: Prop `style` did not match. Server 오류

오류 메세지는 아래와 같다.

Warning: Prop `style` did not match. Server: "display:inline-block;background-color:red;width:15px;height:15px;margin:2px;border-radius:100%;animation-fill-mode:both;animation:react-spinners-GridLoader-grid 0.6140239847719086s -0.18597601522809143s infinite ease" Client: "display:inline-block;background-color:red;width:15px;height:15px;margin:2px;border-radius:100%;animation-fill-mode:both;animation:react-spinners-GridLoader-grid 1.0431923264504426s 0.2431923264504427s infinite ease"

 

문제 발생 원인

로딩중 스피너를 보여주기 위해 react-spinners 라이브러리를 사용하여 작업하던 중 콘솔창에 위의 경고가 나타났다. 이 오류가 발생한 이유는 서버에서 정적으로 만든 페이지의 UI와 실제로 클라이언트에서 Hydration을 진행한 후 보여지는 페이지의 UI가 나타나는 오류이다. 나의 경우에는 스피너가 서버에서 만든 UI와 클라이언트에서 Hyderation 진행 후 만든 UI가 달라서 나타난 오류이다.

 

해결 방법

문제가 되는 컴포넌트를 dynamic import 하여 lazy load를 시키면 문제가 해결된다. dynamic import를 사용하기 위해 next.js에서 제공하는 next/dynamic을 이용하였으며 옵션으로 ssr여부에 대한 값을 설정할 수 있다.

const GridLoader = dynamic(() => import('react-spinners').then((lib) => lib.GridLoader), {
  ssr: false, // ssr 옵션 설정, false로 설정해야 오류 해결
});