Dynamic Import

ES2020의 문법으로 모듈을 빌드타임이 아닌, 런타임에 불러오도록 한다.

첫 페이지 진입시, 필요한 최소한의 코드만 다운받고, 특정 페이지 이동시마다 필요한 코드를 로드 할 수 있게끔 하여 초기 성능을 높이기 위함.
초기 로딩때 당장에 불필요한 기능까지 모두 로딩하는것보다 필요한 기능만 분할하여 로딩하는편이 퍼포먼스 향상에 도움 될 것이다.

Dynamic Import의 기본 문법은 아래와 같이 promise를 리턴하는것처럼 작성한다.

//add.js
const add = (a, b) => a + b;
export default add

//index.js
import('./add.js')
  .then(module => module.default(7, 4)) // returns 11
  .catch(error => // log error);

Next에서는 dynamic이라는 모듈을 사용해서 promise 과정 없이도 변수에 할당 할 수 있게 해준다.

import dynamic from "next/dynamic";

// default export된 컴포넌트를 다이나믹 임포트
const DynamicComponent = dynamic(() => import("../components/hello"), {
  loading: <Loader />,
});

// Hello라는 이름으로 export 된 컴포넌트를 다이나믹 임포트
const DynamicNamedComponent = dynamic(() =>
  import("../components/hello").then((module) => module.Hello)
);

function Home() {
  return (
    <>
      <DynamicComponent />
      <DynamicNamedComponent />
    </>
  );
}

export default Home;