Next.js에서 동적 임포트(dynamic import)를 사용하는 주된 이유

Next.js에서 동적 임포트(dynamic import)를 사용하는 주된 이유는 code splitting과 SSR 최적화입니다. 0이 방법은 특히 클라이언트 사이드 전용 코드에 유용하며, 여러 가지 장점을 제공합니다.

 

여러 이유가 있지만, 크게 3가지로 분류하였습니다.

1. 서버와 클라이언트 코드 분리

2. 성능 최적화

3. 코드 분할

 

서버와 클라이언트 코드 분리

동적 임포트를 활용하면, SSR과정에서 클라이언트 사이드 전용 컴포넌트를 배제할 수 있게 됩니다. 클라이언트 전용 API나 로직을 포함하는 컴포넌트 처리에 있어 효율적입니다.

 

성능 최적화

가장 중요한 이유라고 생각됩니다. 필요할 때만 특정 모듈이나 컴포넌트를 로딩해, 웹앱 로드 시간을 줄이고 전반적인 성능을 개선합니다.
(조건부 렌더링 지원 → 특정 조건이 충족될 때 컴포넌트를 로드할 수 있는 기능을 제공)

 

코드 분할

동적 임포트를 사용하면 필요한 코드만을 로드하여 사용자의 대역폭을 절약하고, 웹앱 반응 속도를 높일 수 있습니다.

 

next/dynamic을 통한 동적 임포트 구현을 Next.js에서 권장하는 패턴으로, 클라이언트 사이드 전용 기능을 포함하는 컴포넌트나 모듈에 대해 특히 유용합니다.