Next.js 코드 분할 의사결정

코드 분할은 많이 나누는 일이 아니다. 첫 화면 필요성, 코드 무게, 호출 시점을 함께 보고 경계를 정한다.

Next.js 코드 분할 의사결정코드 분할은 많이 나누는 일이 아니다. 첫 화면 필요성, 코드 무게, 호출 시점을 함께 보고 경계를 정한다.
1

keep

첫 화면에 꼭 필요한가? · 헤더, 핵심 CTA, 즉시 보이는 리스트는 초기 청크에 남기는 편이 낫다.

2

split

특정 화면 전용인가? · 관리자 도구, 차트 페이지, 지도 화면처럼 라우트 전용 코드는 별도 청크가 자연스럽다.

3

lazy

사용자 행동 뒤에 필요한가? · next/dynamic의 loading 또는 React.lazy와 Suspense를 사용한다.

4

Route split

페이지 단위 자동 분할을 활용하고 Route Group은 레이아웃과 폴더 조직에 사용한다.

5

Dynamic import

클라이언트 전용 컴포넌트를 필요한 순간 불러온다.

핵심! 너무 작은 코드를 과하게 나누면 요청과 대기 시간이 늘 수 있다. 분할 뒤에는 초기 JavaScript 크기와 사용자가 기다리는 시간을 다시 비교한다.