Advanced Features: Dynamic Import | Next.js

Dynamic import

• 컴포넌트를 사용하는 시점에 불러오는 것.

• Next.js의 Image 컴포넌트, Link 컴포넌트등이 Lazy-load 해온다.

• 커스텀 컴포넌트들도 그게 가능하다.

• next/dynamic은 React.lazy그리고 Suspense의 합성 익스텐션이고, Suspense 바운더리가 성공되기전가지 hydration을 딜레이 할 수 있다.

SSR 환경에서는 load하고 싶지 않다면?

• 클라이언트 사이드에서만 컴포넌트를 동적으로 로드하기 위해서, 서버사이드렌더링을 비활성화하는 ssr option을 사용할 수 있다.
• 외부 디펜던시나 컴포넌트가 window와 같은 브라우저 API에 의존한다면 유용하게 사용할 수 있다.

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

내가 만든 컴포넌트를 dynamic Import로 동적으로 가져온다면

const Button = dynamic(() => import('../../components/Button'), {
	loading : () => <div>Loading.....</div>,
})

return (
	<>
		<h1>다이나믹 임포트</h1>
		<Button>This is Button</Button>
	</>
)

• network Tab을 확인해보면 JS부분을 확인했을때 Component Button이 따로 build되어 가져온다.

• 다이나믹 임포트를 안하면 Chunk 파일에 물려있다.