NEXTjs Dynamic import
Dynamic import란?
ES2020에서 제공하는 dynamic import은, 해당 모듈을 애플리케이션의 빌드 타임에 불러오는 것이 아니라 런타임때 불러오는 것이다. 즉 처음 받아오는 모듈 (혹은 소스코드)의 용량을 줄임으로써 페이지의 초기 로딩 속도를 줄일 수 있다.(초기 페이지 로딩시 불필요한 모듈 fetch을 줄임으로써 성능 최적화를 할 수 있다.)
NEXTjs에서의 적용
Basic usage
- 공식문서에서도 말하기를,
NEXTjs 또한 dynamic import를 지원하며 SSR에도 적용이 가능하다.
//
import dynamic from "next/dynamic";
const DynamicComponent = dynamic(() => import("../components/hello"));
function Home() {
return (
<div>
<Header />
<DynamicComponent />
</div>
);
}
export default Home;
- 위에서 보는 바와 같이,
next/dynamic에서 제공하는 dynamic()으로 import()를 리턴하는 콜백함수를 감쌈으로써 구현할 수 있다. 일반적인 React 컴포넌트로서 기능을 하며 props또한 사용이 가능하다.
- 주의할 점으로는
import()의 경로는 템플릿 리터럴이나 변수로 기입해서는 안된다. 또한 React 렌더링 안에서는 사용할 수 없다. ( 클래스형 컴포넌트의 렌더링 함수를 뜻하는 것같다.)
- 마지막으로
import()가 dynamic()안에 있어야 한다는 것인데, 그 이유는 NEXTjs가 웹팩 번들 및 모듈 id를 특정 dynamic() 호출과 일치시키고 렌더링 전에 프리로딩을 할 수 있기 위해서라고 한다.
실제 적용
import LoadingSpinner from "src/components/common/LoadingSpinner";
//
import styled from "styled-components";
//
const DynamicPlot = dynamic(() => import("./test"), {
loading: () => <LoadingSpinner />,
ssr: false,
});
//
const ResultChartPresenter = (): JSX.Element => (
<StyledResultChartPresenter>
<Layout>
<StyledContents>
<DynamicPlot />
</StyledContents>
</Layout>
</StyledResultChartPresenter>
);
//
export default ResultChartPresenter;
- 내 경우,
Plotly 차트 라이브러리를 사용하였는데 모듈 자체의 크기가 매우 크다보니 차트 컴포넌트 로딩까지의 시간 지연과 컴포넌트 렌더링 에러가 지속적으로 발생했었다. 때문에 dynamic import과 더불어NEXTjs에서 제공하는 custom loading과 no SSR 기능을 사용하여 이를 해결할 수 있었다.
Reference