지연 로딩

Lazy loading은 첫 화면에서 모든 무거운 component를 바로 받지 않는 방식입니다. 사용자가 실제로 볼 때 비싼 UI를 불러오세요.

지도, 차트, 에디터, 3D viewer, wallet widget에 좋습니다.
항상 열리지 않는 큰 admin panel에도 좋습니다.
작은 버튼이나 첫 화면 핵심 content에는 별로 도움이 되지 않습니다.

외부 라이브러리

어떤 라이브러리는 크거나 `window` 같은 브라우저 전용 API에 의존합니다. 필요하면 `lazy`로 감싸고 SSR을 끄세요.

지도 widget

큰 component

직접 만든 component도 나눌 수 있습니다. 클릭 후에만 열리는 무거운 editor나 dashboard가 있을 때 유용합니다.

Lazy editor

SSR 또는 client only

Component가 서버에서 렌더링 가능하면 기본 lazy를 사용하세요.
라이브러리가 `window`, `document`, canvas, WebGL, browser storage를 필요로 하면 `{ ssr: false }`를 사용하세요.
빈 공간이 어색하다면 항상 loading fallback을 제공하세요.

꿀팁

사용자 의도 기준으로 나누세요. editor, map, chart, modal, viewer가 좋은 단위입니다.
사용자가 처음 봐야 하는 핵심 요소는 lazy-load하지 마세요.
많은 페이지가 같은 component를 즉시 사용한다면 lazy가 오히려 지연을 만들 수 있습니다.

외부 라이브러리

SSR 또는 client only