Prop style did not match. (feat. Next.js, fullcalendar, SSR)

문제 상황

문제화면 : Next.js에서 fullcalendar라는 달력 라이브러리를 사용하는데 생긴 에러

Warning: Prop `style` did not match. Server: "null" Client: "min-width:;height:"

 

원인

Next.js는 SSR을 하기에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다.

 

게다가 Fullcalendar라이브러리는 SSR을 지원하지 않는다.

 

 

해결법

그렇기에 클라이언트에서만 렌더링을 해야한다.

Next.js에서 제공하는 dynamic import를 사용한다.

export const CalendarPage = () => {
  const Calendars = dynamic(() => import('./components/Calendar'), {
    ssr: false,
  });

  return (
    <Wrapper>
      <Calendars />
    </Wrapper>
  );
};

 

주의

dynamic으로 가져오는 컴포넌트는 exfort default로 내보내야 한다.