Next.js 12 - Dynamic Imports & Lazy-load Imports & Suspense

Next.js 12

 

✅ Dynamic Imports란?

---

처음부터 컴포넌트를 로딩하는 것이 아니라 유저가 해당 컴포넌트를 보고 있을 때만 로딩해오는 import 방법

/* const Bs = dynamic(
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve(import("@components/bs")), 10000),
    ),
  { ssr: false, loading: () => <span>Loading a big component 4u.</span> },
); */
const Bs = dynamic(
  //@ts-ignore
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve(import("@components/bs")), 10000),
    ),
  { ssr: false, suspense: true },
);

 

 

✅ Lazy-load Imports란?

---

Dynamic 컴포넌트가 다운로드 되는데 너무 오래 걸릴 경우 dynamic 함수의 option arg에 loading이라는 prop을 이용하여 컴포넌트가 로딩이 되는 동안 대신 보여줄 컴포넌트를 지정할 수 있다.

const Bs = dynamic(
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve(import("@components/bs")), 10000),
    ),
  { ssr: false, loading: () => <span>Loading a big component 4u.</span> },
);

 

 

✅ Suspense

---

React 18부터는 자체적으로 지원하는 기능인 Suspense가 있다.

option에 {suspense: true}를 적어주면 똑같이 loader 컴포넌트를 보여줄 수 있다.

const Bs = dynamic(
  //@ts-ignore
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve(import("@components/bs")), 10000),
    ),
  { ssr: false, suspense: true },
);

 

그리고 컴포넌트 사이에 <Suspense>를 사용해주면 된다.

<Suspense fallback="Loading...">
  <Bs />
</Suspense>