[NextJS] dynamic

Next.js의 dynamic 기능은 JavaScript 또는 TypeScript 코드를
동적으로(importing dynamically) 가져오는 역할을 합니다.
이것은 특히 서버 측 렌더링(SSR) 또는 정적 사이트 생성(SSG)과 같은 Next.js의 고유한 기능을 이용하는 동안, 브라우저에서만 작동하는 특정 라이브러리를 사용하려고 할 때 매우 유용합니다.

dynamic의 기본적인 사용 예제

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

위의 코드에서 DynamicComponent는 dynamic 함수를 사용하여 동적으로 가져옵니다. 이렇게 하면 DynamicComponent는 첫 페이지 로드 시에는 포함되지 않고, 필요할 때에만 JavaScript 번들에 추가됩니다. 이는 웹 사이트의 초기 로딩 시간을 개선하는 데 도움이 됩니다.

이러한 코드 분할 기법은 Next.js에서 페이지 렌더링에 필요한 최소한의 코드만을 포함하는 것을 가능하게 하며, 이는 성능 최적화에 중요한 역할을 합니다.

또한, dynamic 함수에는 로딩 컴포넌트를 제공하는 등 다양한 옵션을 설정할 수 있습니다.

import dynamic from 'next/dynamic'

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

이 경우에는 DynamicComponentWithLoading가 로드되는 동안 <p>Loading...</p>가 보여집니다. 이 기능은 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 인디케이터를 제공하는 데 유용합니다.