Next.js에서 모든 컴포넌트를 dynamic import하는건 별로인가요?

Question

안녕하세요. Next.js page router 방식으로 프로젝트 진행 중 질문이 있어 글 남깁니다.
현재 프로젝트의 크기가 커져서 최적화 작업을 진행중에 컴포넌트의 import 방식을 정적에서 동적으로 바꾸어 주려고 합니다.
그런데 만약 A 컴포넌트를 X컴포넌트에서 dynamic으로 import하고, Y컴포넌트에서는 정적으로 import하면 그만큼 중복된 코드를 불러온다고 이해하고 있는데, 그럼 프로젝트에서 사용되는 컴포넌트 중 2개 이상의 컴포넌트에서 사용되는 것들은 모두 dynamic import로 선언 해주어야 하나요? 만약 그렇다면 모든 파일에 import문을 dynamic으로 바꾸어 주어야 하나요 아니면 next.config.js에서 일괄적으로 설정하는 방법이 존재하나요?

강병진 · Accepted Answer

우선, 컴포넌트를 동적으로 import하는 경우와 정적으로 import하는 경우에 대한 차이를 정확히 이해하고 계신 것 같습니다. 동적 import는 해당 컴포넌트가 실제로 필요할 때에만 로드되므로 초기 로딩 시간을 줄일 수 있는 장점이 있습니다. 반면, 정적 import는 빌드 시 모든 컴포넌트가 번들에 포함되기 때문에 초기 로딩 시간이 늘어날 수 있습니다.

질문에서 언급하신 것처럼, 동일한 컴포넌트를 두 가지 방식으로 import할 경우, 번들에 중복된 코드가 포함될 수 있습니다. 따라서 컴포넌트를 일관되게 동적으로 import하는 것이 좋을 수 있습니다.

하지만 모든 컴포넌트를 동적으로 import해야 하는 것은 아닙니다. 동적 import는 다음과 같은 경우에 특히 유용합니다:
1. 초기 로드 시 필요하지 않은 경우
2. 무거운 라이브러리나 컴포넌트인 경우
3. 특정 사용자 인터랙션(예: 모달, 탭, 드롭다운 등)에 의해 로드되는 경우

그리고 next.config.js 파일에서 일괄적으로 설정하는 방법은 제공되지 않으므로, 필요한 컴포넌트에 대해 개별적으로 동적 import를 설정해 주셔야 합니다.