지연 로딩 청크 전략

초기 경로 측정

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

JS cost

next/dynamic이나 import()로 늦게 필요한 컴포넌트를 별도 청크로 만든다.

route chunk 외 수동 분리

loading UI 또는 Suspense fallback이 레이아웃을 흔들지 않도록 크기를 고정한다.

CLS 방지

분리 후 상호작용 지연, 서버 렌더 여부, 에러 경계를 함께 점검한다.

UX regression

dynamic()

컴포넌트 단위로 지연 로드 조건부로 열리는 모달, 차트, 마크다운 에디터에 맞다.

초기 JS 감소

ssr:false

브라우저 API 의존 컴포넌트 window, document가 필요한 UI는 서버 렌더를 끄되 SEO 핵심 영역에는 쓰지 않는다.

client only

Suspense

대기 UI를 선언적으로 배치 서버/클라이언트 경계와 fallback 높이를 함께 설계한다.

loading shift 한계

prefetch

곧 필요할 청크를 미리 가져옴 사용자가 자주 여는 메뉴는 hover/viewport 시점 prefetch를 고려한다.

과한 prefetch 금지

First Load JS 분리 전후 첫 로드 JS 크기가 줄었는지 빌드 분석으로 확인한다.

LCP/INP 중요 콘텐츠 로딩과 첫 상호작용이 느려지지 않았는지 Web Vitals를 본다.

Error Boundary 청크 로드 실패 때 빈 화면 대신 재시도나 오류 UI가 나오는지 확인한다.