Lazy Loading

Next 코드 분할 경계

처음 화면에 꼭 필요한 코드와 상호작용 뒤에 필요한 코드를 구분하면 초기 로딩 비용을 줄일 수 있습니다.

지연 로드

next/dynamic 분할 지점

차트, 에디터, 지도처럼 무거운 클라이언트 컴포넌트를 실제 필요한 순간에 불러옵니다.

서버 렌더 경계

데이터 조회와 정적 UI를 서버에 두어 클라이언트 번들에 불필요한 코드가 들어가지 않게 합니다.

구조 분리

화면 단위로 코드와 레이아웃을 나눠 기능별 번들 증가 범위를 추적하기 쉽게 합니다.

대기 화면

지연 로딩 중 skeleton이나 대체 화면을 보여 사용자가 빈 화면을 오류로 해석하지 않게 합니다.

번들 경계

차트, 에디터, 모달처럼 즉시 필요하지 않은 클라이언트 코드는 dynamic import 후보가 됩니다.

Server Components인터랙션이 없는 목록, 설명, 서버 데이터 조합은 클라이언트 경계 밖에 둡니다.

라우트 그룹관리자, 공개 페이지, 인증 영역처럼 사용자 여정별로 코드 소유권을 분리합니다.

로딩 UI지연 구간에는 skeleton, spinner, placeholder 중 실제 공간을 보존하는 형태를 둡니다.