[Next] Plotly.js 다이나믹 임포트 하기

안녕하세요, 개발자 Sean입니다. 

 

오늘은 본격적으로 회사 블로그 프로젝트 작업에 들어갔는데요, 예상치 못한 복병을 만나게 되었습니다. 

 

애널리스트분들이 주피터 노트북에서 plotly 라이브러리를 사용해 차트를 만들기 때문에

해당 라이브러리를 이용해 차트를 구현해야 하는 상황이었습니다.

 

따라서 별다른 생각 없이 아래와 같이 라이브러리를 임포트 했습니다.

import Plot from 'react-plotly.js';

 

그런데 에러가 나오는 것이었습니다!

Server Error
ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

 

왜 이런 것일까요?

 

구글링을 통해 알아보니 이건 바로 SSR 때문에 생기는 현상이었습니다. 

 

Plotly.js는 임포트 이후 API를 통해 potly와 교신을 하도록 되어있다고 합니다. (제가 제대로 해석했는지는 모르겠습니다만...)

 

그런데 SSR은 이미 만들어진 HTML을 렌더링 하는 것이기 때문에 potly와의 교신이 되지 않으니 정의가 되지 않았다는 에러가 발생하는 것이었습니다. 

 

정말 신기하지 않나요?

SPA때는 생각치도 못했던 일이었는데 말이죠.

원인을 찾느라 조금 고생하긴 했지만 재밌는 현상이었습니다. 

 

해결방법은 next의 다이내믹 임포트를 이용하면 간단하게 해결할 수 있습니다.

 

여기서 다이내믹 임포트란 동기적으로 모듈을 임포트 할 수 있도록 하는 next의 기능 중 하나인데요,

SSR을 지원하지만 와중에 이런 동기적인 처리까지 배려하는 next의 유연성을 돋보이게 하는 기능이 아닐까 생각합니다. 

 

코드는 아래와 같습니다.

 

import dynamic from 'next/dynamic';

const PlotGraph = dynamic(import('src/components/PlotGraph'),{ssr: false});

...

return (
  <>
    <PlotGraph
      data={data}
      layout={layout}
    />
  </>
)

간단히 설명드리자면 우선 plotly.js를 임포트하는 PlotGraph 컴포넌트를 생성한 뒤에 해당 컴포넌트를 다이내믹하게 임포트 해오는 방식입니다. 

 

여기서 ssr: false가 중요합니다!! true면 작동 안합니다!!