BUNDLE STRATEGY

지연 로딩 청크 전략

첫 화면에 필요한 코드는 남기고, 무거운 클라이언트 UI는 사용자 행동이나 노출 시점에 별도 청크로 가져온다.

초기 경로 측정

첫 화면에서 실제로 쓰이지 않는 큰 라이브러리와 클라이언트 컴포넌트를 찾는다.

next/dynamic 또는 import()로 늦게 필요한 UI를 분리한다.

로딩 UI가 실제 영역의 높이를 보존해 레이아웃 흔들림을 막게 설계한다.

분리 뒤 클릭 지연, 서버 렌더 여부, 오류 경계를 함께 확인한다.

dynamic() 컴포넌트 단위로 늦게 로드

조건부 모달, 차트, 마크다운 에디터처럼 사용 순간이 분명한 UI에 맞다.

ssr: false 브라우저 API 의존 UI

window가 필요한 UI에만 쓰고, SEO 핵심 영역에는 적용하지 않는다.

Suspense 대기 상태를 경계 안에 둔다

느린 부분만 fallback으로 바꾸고 본문 전체가 빈 화면이 되지 않게 한다.

prefetch 곧 필요한 청크만 미리 받기

사용 확률이 높은 다음 경로에 한정해 체감 지연을 줄인다.

초기 JS 감소 빌드 분석에서 첫 로드 JavaScript가 줄었는지 비교한다.

UX 유지 LCP와 첫 클릭 응답이 늦어지지 않았는지 실제 페이지에서 확인한다.

실패 대응 청크 로드 실패 때 재시도나 오류 UI가 보이는지 점검한다.