프론트엔드를 개발하다 보면 import() 형태의 dynamic import(동적 import) 를 자주 접하게 된다. 정적 import와는 달리, 실행 시점에 모듈을 불러오는 방식인데, 왜 이미 잘 쓰고 있는 정적 import 대신 이런 방식을 사용해야 할까?

프론트엔드 애플리케이션이 점점 규모가 커지고, 코드 실행 환경이 다양해지면서 dynamic import는 단순한 선택을 넘어 성능과 유연성을 확보하기 위한 핵심 기술이 되었다.

1. 초기 로딩 속도 최적화 — 코드 스플리팅

정적 import는 페이지가 처음 로드될 때 모든 코드가 번들에 포함된다.

하지만 dynamic import를 사용하면 특정 컴포넌트를 사용자가 실제로 보게 되는 시점에 로드할 수 있다.

아래 예시는 무거운 에디터 컴포넌트를 페이지 진입 시점이 아닌 “필요한 순간”에 로딩하는 방식이다.

1import dynamic from "next/dynamic";
2
3const Editor = dynamic(() => import("@/components/Editor"), {
4  ssr: false,
5  loading: () => <p>Loading editor...</p>,
6});
7
8export default function Page() {
9  return (
10    <div>
11      <h1>문서 작성</h1>
12      <Editor />
13    </div>
14  );
15}

이 경우 에디터는 초기 번들에서 제외되고, 클라이언트에서 Editor가 실제로 렌더링될 때 로딩된다.

초기 화면을 빠르게 보여줄 수 있다는 점에서 페이지 성능에 큰 도움이 된다.

---

2. SSR 환경에서 안전하게 클라이언트 전용 코드 로드

브라우저 API(window, document 등)를 사용하는 컴포넌트는 SSR 환경에서 에러를 일으킬 수 있다.

이때 dynamic import의 ssr: false 옵션은 해당 컴포넌트를 브라우저에서만 로딩하도록 만든다.

예시:

1import dynamic from "next/dynamic";
2
3const Chart = dynamic(() => import("@/components/Chart"), {
4  ssr: false,
5});

이 패턴은 다음 상황에서 유용하다.

• Canvas 기반 차트 라이브러리
• WebGL, Map 같은 브라우저 전용 기능
• window, localStorage 등 브라우저 API 사용 컴포넌트

SSR 과정에서 렌더링하지 않으니 서버에서 오류 없이 안전하게 처리된다.

---

3. 조건부 렌더링 + 동적 로딩 조합

dynamic import는 조건이 충족되는 시점에만 특정 컴포넌트를 로드할 때도 유용하다.

예를 들어, 사용자가 버튼을 눌렀을 때만 무거운 모듈을 가져오는 방식:

1import { useState } from "react";
2import dynamic from "next/dynamic";
3
4export default function Page() {
5  const [open, setOpen] = useState(false);
6
7  const HeavyModal = dynamic(() => import("@/components/HeavyModal"), {
8    ssr: false,
9  });
10
11  return (
12    <div>
13      <button onClick={() => setOpen(true)}>Open Modal</button>
14      {open && <HeavyModal />}
15    </div>
16  );
17}

초기 로딩 단계에서는 모달 컴포넌트를 포함하지 않기 때문에 번들 크기를 줄일 수 있다.

---

4. 런타임 조건에 따라 모듈 선택

Next.js도 dynamic import를 사용하면 런타임 기준으로 모듈을 선택적으로 로드할 수 있다.

1const Component = dynamic(() =>
2  import(`@/components/themes/${themeName}`)
3);

빌드 타임에는 어떤 themeName이 들어 있는지 모르더라도,

사용자가 선택한 옵션에 따라 컴포넌트를 불러올 수 있다.

이런 패턴은 플러그인 구조나 기능 확장 구조를 가진 앱에서 특히 유용하다.

---

마무리

Next.js에서 dynamic import를 사용하는 이유는 명확하다.

• 초기 번들 크기 감소 → 첫 화면 로딩 속도 개선
• 브라우저 전용 코드를 SSR 에러 없이 안전하게 처리
• 필요한 순간에만 모듈 로드 → UX 개선
• 런타임에서 모듈을 동적으로 선택 가능

규모가 있는 애플리케이션일수록 dynamic import는 선택이 아니라 필수에 가까운 도구가 된다.