클라이언트 지연 로딩
next/dynamic으로 차트, 에디터, 지도처럼 무거운 UI를
필요할 때 불러옵니다.
번들 경계
코드 분할과 지연 로딩
라우트, 클라이언트 컴포넌트, 서버 경계를 나누면 어떤 코드가 언제 내려가야 하는지 결정하기 쉽습니다.
라우트 단위 분리
App Router는 경로별로 필요한 코드만 묶어 페이지 이동 시점의 비용을 나눕니다.
서버 컴포넌트 유지
상호작용이 없는 데이터 조립 코드는 서버 컴포넌트에 남겨 hydration 대상과 클라이언트 번들 크기를 줄입니다.
늦게 불러도 되는 코드와 늦으면 안 되는 코드 구분
초기 화면이 비어 보이면 지연 로딩이 오히려 UX를 해칠 수 있으므로 로딩 위치와 fallback을 함께 설계합니다.
효과 확인
번들초기 JavaScript 크기가 실제로 줄었는지 확인합니다.
반응클릭 후 로딩 지연이 사용자에게 자연스러운지 봅니다.
경계서버 전용 코드가 클라이언트 번들로 새지 않는지
점검합니다.