NextJS: dynamic import

Next.js의 Dynamic Import: 효율적인 코드 분할 기법

Next.js에서 제공하는 dynamic import는 애플리케이션의 성능을 크게 향상시킬 수 있는 강력한 기능입니다. 이 기술을 통해 대규모 애플리케이션의 코드를 효율적으로 관리하고, 초기 로딩 시간을 단축할 수 있습니다.

코드 분할(Code Splitting)이란?

코드 분할은 대규모 애플리케이션의 JavaScript 코드를 더 작은 조각(chunk)으로 나누는 기술입니다. 이를 통해 애플리케이션의 초기 로딩 속도를 개선하고, 필요한 코드만 필요한 시점에 로드할 수 있습니다.

Next.js의 Dynamic Import 활용하기

Next.js는 next/dynamic을 통해 React 컴포넌트의 동적 로딩을 지원합니다. 이를 통해 컴포넌트나 라이브러리를 필요한 시점에 로드할 수 있어, 초기 JavaScript 번들 크기를 줄일 수 있습니다.

기본사용법

import dynamic from 'next/dynamic';

const DynamicHeader = dynamic(() => import('../components/Header'));

function HomePage() {
  return (
    <div>
      <DynamicHeader />
      <h1>Welcome to my blog!</h1>
    </div>
  );
}

예시에서 Header 컴포넌트는 페이지가 로드된 후에 동적으로 불러와집니다.

Dynamic Import의 주요 옵션

1. ssr (서버 사이드 렌더링)

const DynamicComponent = dynamic(() => 
import('../components/Heavy'), { ssr: false });

ssr: false로 설정하면 해당 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다.

2. loading (로딩 컴포넌트)

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/Heavy'),
  { loading: () => <p>Loading...</p> }
);

컴포넌트가 로드되는 동안 표시될 로딩 컴포넌트를 지정할 수 있습니다.

3.delay (지연 시간)

const DynamicComponentWithDelay = dynamic(() => 
import('../components/Heavy'), { delay: 200 });

컴포넌트 로딩을 시작하기 전 지정된 시간(밀리초) 동안 대기합니다.

실제 사용 예시: 블로그 댓글 시스템

블로그 포스트 페이지에 댓글 시스템을 동적으로 로드하는 예시를 살펴보겠습니다.

import dynamic from 'next/dynamic';

const DynamicComments = dynamic(() => import('../components/Comments'), {
  loading: () => <p>댓글을 불러오는 중...</p>,
  ssr: false
});

function BlogPost({ content }) {
  return (
    <article>
      <h1>{content.title}</h1>
      <p>{content.body}</p>
      <DynamicComments postId={content.id} />
    </article>
  );
}

예시에서 댓글 시스템은 필요할 때만 로드되며, 로딩 중에는 사용자에게 로딩 메시지를 표시합니다. 또한 ssr: false를 설정하여 서버 사이드 렌더링을 비활성화하고 클라이언트에서만 댓글을 로드합니다.

실제 사용 예시2: Header navigation

import dynamic from "next/dynamic";
// import NavIcons from "./NavIcons";
const NavIcons = dynamic(() => import("./NavIcons"), { ssr: false });

const Navbar = () => {
  return (
    <div className="h-20 px-4 md:px-8 lg:px-16 xl:px-32 2xl:px-64 relative">
      <div className="flex items-center justify-between h-full md:hidden">
        {/* MOBILE */}
        <Link href="/">
          <div className="text-2xl tracking-wide">DWSH</div>
        </Link>
        <Menu />
      </div>
      {/* BIGGER SCREEN */}
      <div className="hidden md:flex items-center justify-between h-full gap-8">
        {/* LEFT */}
        <div className="w-1/3 xl:w-1/2 flex items-center gap-12">
          <Link href="/" className="flex items-center gap-3">
            <Image src="/logo3.png" alt="logo" width={50} height={50} />
            <div className="text-2xl tracking-wide font-mono">DWSH</div>
          </Link>
          <div className="hidden xl:flex gap-4">
            <Link href="/">Home</Link>
            <Link href="/">Shop</Link>
            <Link href="/">Deals</Link>
            <Link href="/">About</Link>
            <Link href="/">Contact</Link>
          </div>
        </div>
        {/* RIGHT */}
        <div className="w-2/3 xl:w-1/2 flex justify-between items-center gap-8">
          <SearchBar />
          <NavIcons />
        </div>
      </div>
    </div>
  );
};

export default Navbar;

Next.js의 dynamic import는 대규모 애플리케이션의 성능을 최적화하는 강력한 도구입니다. 필요한 코드만 필요한 시점에 로드함으로써 초기 로딩 시간을 단축하고 사용자 경험을 개선할 수 있습니다. 적절히 활용한다면 더 빠르고 효율적인 웹 애플리케이션을 구축할 수 있을 것입니다.