Next.js App Router 환경에서 dynamic 함수를 사용하여 명시적으로 코드 스플리팅하기

next.js app router는 기본적으로 코드 스플리팅을 제공하지만 이는 페이지 단위의 코드 스플리팅입니다.

코드 스플리팅: 애플리케이션의 자바스크립트 코드를 여러 개의 작은 부분으로 나누어 로딩하는 기술. 초기 로딩 시간을 최적화하고 성능을 향상시킬 수 있는 장점이 있다.

Next.js의 자동 코드 스플리팅은 페이지 기반으로 이루어지며, 페이지 간에 자동으로 필요한 코드만을 로드합니다. 그러나 페이지 내에서 컴포넌트 단위로 동적으로 로딩이 필요한 경우에는 dynamic 함수를 사용하여 명시적으로 코드 스플리팅을 수행하는 것이 도움이 됩니다. 이는 특히 큰 규모의 애플리케이션에서 특정 기능이나 모듈이 사용자의 상호 작용에 따라 동적으로 로딩되어야 할 때 유용합니다.

따라서, 페이지 단위의 자동 코드 스플리팅이 주로 페이지 간 전환 및 초기 로딩 속도 최적화에 도움이 되는 반면, dynamic 함수를 사용한 명시적인 코드 스플리팅은 페이지 내에서 컴포넌트 단위로 세밀한 제어를 가능하게 합니다.

일반적인 import 방법 외에 dynamic 함수를 사용하여 import하는 목적은 컴포넌트 단위에서 코드 스플리팅을 수행하기 위한 것입니다. 특정 컴포넌트를 필요할 때만 로딩하고 초기 로딩 속도를 최적화하기 위한 목적으로 사용됩니다.

dynamic 함수로 동적 import와 일반적인 import의 차이

    // pages/index.js

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

// 방식 1: dynamic 함수 사용 (동적 임포트)
const DynamicComponent = dynamic(() => import('../components/SomeComponent'));

// 방식 2: 일반적인 import 문 사용
import SomeComponent from '../components/SomeComponent';

function HomePage() {
  const [showDynamicComponent, setShowDynamicComponent] = useState(false);

  // 예시: 버튼 클릭 시 동적 컴포넌트 로딩
  const loadDynamicComponent = () => {
    setShowDynamicComponent(true);
  };

  return (
    <div>
      <h1>Hello Next.js</h1>

      {/* 방식 1: dynamic 함수 사용 */}
      {showDynamicComponent && <DynamicComponent />}

      {/* 방식 2: 일반적인 import 문 사용 */}
      <SomeComponent />

      {/* 버튼 클릭 시 동적 컴포넌트 로딩 */}
      <button onClick={loadDynamicComponent}>Load Dynamic Component</button>
    </div>
  );
}

export default HomePage;

위 코드에서 는 dynamic 함수로 import하였고 버튼을 클릭했을 때만 로딩되도록 하였습니다. dynamic함수를 사용하여 명시적으로 코드 스플리팅을 함으로써 컴포넌트 단위에서 더욱 세밀하게 초기 로딩 속도를 줄일 수 있습니다.