번들 확인
분석 도구로 큰 라이브러리와 클라이언트 경계를 먼저 찾습니다.
analyze
번들 분할 기준
초기 번들 분리 기준
App Router는 라우트 단위 분할을 기본 제공하므로, 직접 나눌 대상은 첫 화면에 필요 없는 무거운 클라이언트 코드에 집중합니다.
첫 화면 판정
렌더링 즉시 필요한 컴포넌트는 무리하게 늦추지 않습니다.
above fold
서버 이동
데이터 가공과 정적 UI는 Server Component로 남겨 JS를 줄입니다.
server
동적 로딩
지도, 차트, 에디터처럼 무겁고 늦게 쓰는 UI만 dynamic 처리합니다.
next/dynamic
로딩 상태
지연 구간에는 높이가 안정적인 fallback UI를 함께 둡니다.
loading
클라이언트 파일 하나가 import 그래프를 끌고 옵니다
상단 파일에 "use client"를 붙이면 그 아래 모듈도 클라이언트 번들 후보가 됩니다. 상호작용이 있는 작은 잎 컴포넌트로 경계를 내립니다.
"use client"
대상
우선 전략
fallback
번들 효과
라우트 페이지
자동 분할
layout 유지
페이지별 JS
지도와 차트
dynamic
고정 높이 skeleton
초기 청크 감소
DB 가공
Server Component
없음
클라이언트 JS 제거