Jammy's Dream Note

NextJS - Dynamic Import

Wonyi Jang's photo
Wonyi Jang
·

2 min read

Table of contents

원문 링크

Dynamic Import

Next.js 는 import() 로 외부 라이브러리를, next/dynamic 로 React Component 를 느리게 로드할 수 있도록 지원한다. Deferred loading 은 페이지를 렌더링하는 데 필요한 JavaScript 의 양을 줄임으로써 초기 로드 성능을 향상시키는데 도움이 된다. Component 또는 라이브러리는 사용될 때만 가져오고 JavaScript 번들에 포함된다.

next/dynamic 은 React.lazy 와 Suspense 의 복합 확장으로, Component 는 Suspense boundary 가 resolve 될 때까지 hydration 을 지연시킬 수 있다.

Example

next/dynamic 을 사용하면 header component 가 페이지의 초기 JavaScript 번들에 포함되지 않는다. 페이지는 Suspense boundary 가 해결되면 Suspense fallback 을 먼저 렌더링한 다음 Header componet 를 렌더링 한다.

import dynamic from 'next/dynamic'

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

export default function Home() {
  return <DynamicHeader />
}

Note: import('path/to/component') 에서 path 를 명시적으로 작성해야 한다. template string 이나 변수가 될 수 없다. 또한 Next.js 가 웹팩 번들/모듈 id 들을 특정 dynamic() 호출에 일치시키고 렌더링하기 전에 preload 할 수 있도록 하려면 import() 가 dynamic() 호출 내부에 있어야한다. dynamic() 은 React.lazy 와 유사하게 모듈의 최상위 레벨에 표시되어야 하기 때문에 React 렌더링 내부에서 사용할 수 없다.

With named exports

명명된 export 를 동적으로 import 하려면 import() 를 통해 반환된 Promise 에서 할 수 있다.

// components/hello.js
export function Hello() {
  return <p>Hello!</p>
}

// pages/index.js
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

With no SSR

클라이언트 측에서 component 를 동적으로 로드하려면 ssr 옵션을 사용하여 서버 렌더링을 실행 중지할 수 있다. 이것은 외부 종속성 또는 component 가 window 와 같은 브라우저 API 에 의존하는 경우에 유용하다.

import dynamic from 'next/dynamic'

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

With external libraies

이 예에서는 fuzzy 검색에 외부 라이브러리 fuse.js 를 사용한다. 모듈은 사용자가 검색 input 에 입력한 후에만 브라우저에 로드된다.

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Lee']

export default function Page() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}
Next.js