[내보내번] Next.js docs - Dynamic Import

내보내번(내가 보려고 내가 번역한...) Next.js docs

2021년 8월 3일 기준 Next.js 공식 문서를 번역했다.

※ 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 혼자 공식문서를 참조해가며 번역하다 보니 오타도 많을 수 있다. 정확한 내용은 공식문서를 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.

(하지만 댓글 피드백도 환영합니다😃 )

Next.js 공식문서 확인하기>>

Advanced Features: Dynamic Import | Next.js

Next.js supports ES2020 dynamic import() for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.

In the following example, we implement fuzzy search using fuse.js and only load the module dynamically in the browser after the user types in the search input:

Next.js는 자바스크립트의 ES2020 dynamic import()를 지원한다. 이것으로 자바스크립트 모듈을 동적으로 가져와서 작업할 수 있다. SSR과도 잘 동작한다. 

아래의 예제에서는 우리가 fuzzy 검색을 fuse.js를 사용하여 구현해놓았는데 사용자가 검색어를 입력한 후에만 브라우저에서 동적으로 모듈을 로드하는 것을 보여준다.

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Max', '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>
  )
}

You can think of dynamic imports as another way to split your code into manageable chunks.

React components can also be imported using dynamic imports, but in this case we use it in conjunction with next/dynamic to make sure it works like any other React Component. Check out the sections below for more details on how it works.

dynamic import를 코드를 관리하기 좋은 덩어리로 나누는 다른 방법으로도 생각할 수도 있다. 

React 컴포넌트 역시 dynamic import로 가져올 수 있지만 이 경우에 next/dynamic과 함께 사용하여 다른 React 컴포넌트처럼 동작하는지 확인한다. 어떻게 동작하는지에 대한 더 자세한 점은 아래 부분을 확인해보라. 

Basic usage

In the following example, the module ../components/hello will be dynamically loaded by the page:

아래의 예제에서는 ../components/hello 모듈이 페이지에서 동적으로 로드될 것이다. 

import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

DynamicComponent will be the default component returned by ../components/hello. It works like a regular React Component, and you can pass props to it as you normally would.

예제의 DynamicComponent는 ../components/hello에서 반환된 default 컴포넌트이다. 보통의 React 컴포넌트처럼 동작하며, 보통하는 것과 같은 방법으로 props을 넘겨줄 수 있다. 

Note: In import('path/to/component'), the path must be explicitly written. It can't be a template string nor a variable. Furthermore the import() has to be inside the dynamic() call for Next.js to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering. dynamic() can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to React.lazy.

import('path/to/component')에서 경로는 반드시 명시적으로 작성되어야한다. 경로는 템플릿 문자열이나 변수여서는 안된다. 또한 import()는 Next.js가 웹팩 번들/모듈 id를 특정 dynamic() 호출과 일치시키고 렌더링 전에 프리로드할 수 있도록 하기 위해서 dynamic() 호출 내부에 있어야만 한다. dynamic()은 React.lazy와 비슷하게 프리로드가 동작하기 위해 모듈의 최상위 레벨에 표시되어야하기 때문에 React 렌더 안에서 사용할 수 없다.  

 

With named exports

If the dynamic component is not the default export, you can use a named export too. Consider the module ../components/hello.js which has a named export Hello:

dynamic 컴포넌트가 default export가 아니라면 named 컴포넌트 역시 사용할 수 있다. Hello라는 named export가 있는  ../component/hello.js 모듈을 살펴보라.

export function Hello() {
  return <p>Hello!</p>
}

To dynamically import the Hello component, you can return it from the Promise returned by import(), like so: 

Hello 컴포넌트를 동적으로 가져오려면 아래처럼 import()에 의해서 반환된 Promise로부터 반환할 수 있다. 

import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

 

With custom loading component

An optional loading component can be added to render a loading state while the dynamic component is being loaded. For example:

dynamic 컴포넌트가 로드되는 동안 로딩 상태를 렌더하는 선택적인 로딩 컴포넌트가 추가될 수 있다. 예를 들면: 

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

 

With no SSR

You may not always want to include a module on server-side. For example, when the module includes a library that only works in the browser.

Take a look at the following example:

항상 서버 측에 모듈을 추가하고 싶지 않을 수 있다. 예를 들면, 모듈이 브라우저에서만 동작하는 라이브러리를 포함한 경우이다.

아래의 예제를 살펴보라:

import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home