Lazy Loading

첫 화면 코드는 작게, 무거운 기능은 나중에 받는다

lazy loading은 기능을 숨기는 기법이 아니라 사용자가 아직 보지 않은 클라이언트 코드를 별도 청크로 늦게 받게 만드는 경계 설계다.

1

초기 번들

헤더, 레이아웃, 첫 화면 텍스트처럼 즉시 보여야 하는 코드만 먼저 보낸다.

page shell
2

지연 경계

차트, 에디터, 지도처럼 무거운 컴포넌트 앞에 청크 경계를 둔다.

dynamic(() => import(...))
3

나중 청크

사용자가 열거나 스크롤한 순간 필요한 코드만 추가로 내려받는다.

chart.chunk.js
4

화면 합류

대기 UI가 실제 기능으로 교체되며 사용자는 빈 화면을 보지 않는다.

loading → ready
Server Component 데이터 조합과 정적 설명

상호작용이 없다면 클라이언트 번들에 넣지 않는다.

Client Component 첫 조작에 필요한 기능

검색 입력, 토글, 폼처럼 바로 만지는 코드는 초기 경계 안에 둔다.

Lazy Boundary 나중에 여는 무거운 기능

차트, 에디터, 지도는 placeholder와 함께 늦게 불러온다.