Next.js에서 코드 스플리팅의 이점과 방법

18 Oct 2023

nextjs

코드 스플리팅(Code Splitting)은 Next.js에서 사용할 수 있는 강력한 기능 중 하나입니다. 이를 통해 애플리케이션을 작은 번들로 분할하여 초기 로딩 속도를 향상시킬 수 있습니다.

코드 스플리팅의 이점

초기 로딩 속도 개선: 코드 스플리팅을 사용하면 애플리케이션의 기본 구조나 화면에서 필요한 부분만을 최초로 로드할 수 있습니다. 따라서 사용자가 애플리케이션을 처음 접할 때 초기 렌더링 속도가 향상됩니다.
리소스 효율성: 코드 스플리팅을 통해 애플리케이션에 필요한 모듈만 로드하므로 불필요한 코드를 로드하는 경우가 줄어들어서 전체적인 리소스 사용량이 줄어듭니다.
동적 로딩: 코드 스플리팅은 페이지 로드 도중에 필요한 모듈을 로드할 수 있게 해줍니다. 이는 사용자가 필요한 애플리케이션의 기능을 사용할 때까지 해당 모듈을 로드하지 않고 대기할 수 있게 하는 것을 의미합니다. 이를 통해 초기 로딩 시간을 단축할 수 있습니다.

코드 스플리팅 방법

Next.js에서 코드 스플리팅을 구현하는 방법은 다양합니다. 대표적으로는 다음과 같은 방법들이 있습니다.

1. 동적 임포트(Dynamic Import)

Next.js에서는 동적 임포트를 통해 필요한 모듈을 동적으로 로드할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

import dynamic from 'next/dynamic';

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

const HomePage = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default HomePage;

2. 라우터 기반 코드 스플리팅

Next.js에서는 페이지 단위로 코드 스플리팅을 적용할 수 있습니다. 이를 위해 next/router의 import 함수를 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

import { useRouter } from 'next/router';

const dynamicallyLoadPage = async () => {
  const { default: MyPage } = await import('../pages/MyPage');
  return MyPage;
}

const MyComponent = () => {
  const router = useRouter();

  const handleClick = () => {
    dynamicallyLoadPage().then((MyPage) => {
      router.push('/mypage'); // 동적으로 로드된 페이지로 이동
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Go to My Page</button>
    </div>
  );
};

export default MyComponent;

결론

Next.js에서 코드 스플리팅을 이용하여 애플리케이션의 초기 로딩 속도를 개선할 수 있습니다. 동적 임포트와 라우터 기반 코드 스플리팅을 통해 필요한 모듈을 효율적으로 로드할 수 있습니다. 이를 적절히 활용하여 사용자 경험을 향상시키고, 애플리케이션의 성능을 최적화해보세요.

참고 자료: