Next.js 사이트 성능 관리 - next/dynamic 사용하기

사이트 내 js, css 등의  파일 로드 시간을 단축하기 위해 next/dynamic을 적용하고자 한다. 

 

기존에 모듈, 컴포넌트들을 import하는 방식은 다음과 같았다. 

 

기존

import Modal from "@/components/common/modal";

 

next/dynamic 적용 후

import dynamic from "next/dynamic";

const Modal = dynamic(() => import("@/components/common/modal"), {
  loading: () => <>Loading...</>,
});

const Form = dynamic(() => import("@/components/home/form"), {
  loading: () => <>Loading...</>,
});

const Loading = dynamic(() => import("@/components/common/loading"), {
  loading: () => <>Loading...</>,
});

 

위와 같이 next/dynamic을 적용하게 되면 페이지 최초 로드 시 다운로드 받지 않아도 되는 컴포넌트의 파일을 다운받아 오는 것을 방지해 사이트의 로드 시간을 단축시킬 수 있다. 

 

예를 들어 페이지 내에 어떠한 버튼을 누르면 경고 문구를 담은 모달창을 띄워주는 기능이 있다고 가정해보자.

해당 경고 모달창은 버튼을 눌렀을 경우에만 보여지면 된다. 그렇기에 페이지 최초 로드시에는 모달창에 해당하는 파일을 다운로드 받아올 필요가 없다. 페이지 로드 시간을 줄이기 위해 경고 모달창을 정의한 .js 파일을 next/dynamic을 이용해 import 해오는 경우 버튼을 누름과 동시에 경고 모달창의 .js 파일을 로드하도록 할 수 있다.