Lazy loading with dynamic import

초기화면 로딩시간은 UX에 중요한 요소입니다. X2bee 솔루션은 더 나은 UX를 위해 lazy loading을 구현합니다.

Next.js page

아래는 app/page.tsx의 코드이다.

• 용량이 꽤 큰 PopupListModal을 import한 후,
• useState의 초기값을 false로 놓아,
• PopupListModal component가 렌더링되지 않게 해놓았다.

간단한 예를 들었지만 이 component는 실제 application에서는,
웹사이트를 이용하는 모든 사람들이 꼭 보지 않아도 되는,
원하는 사람만 클릭해서 봐도 되는 component라고 보면 된다.

'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import PopupListModal from '@/components/common/modal/popup-list-modal'

const Home = () => {
  const [isShow, setIsShow] = useState<boolean>(false)
  return (
    <>
      <Button onClick={() => setIsShow(true)}>Click to Show Component </Button>
      {isShow && <PopupListModal popupTgtScrn={'main'} />}
    </>
  )
}

export default Home

빌드 후에 브라우저에서 살펴보면

 

1.4Mb의 용량을 가져오는 것을 볼 수 있다.
이는 렌더링이 되지 않음에도 불구하고 import로 가져오는 것이다.
당장 main page에 필요하지 않는 component를 import해와서 초기 로딩 속도가 느려지는 결과를 낳는 것이다.

위와 완벽히 똑같은 기능의 page.tsx이지만 다음 코드를 보자.

Dynamic Import

app/page.tsx를 다음과 같이 수정한다.
직접 PopupListModal component를 import하지 않고 dynamic import를 이용하였다.

'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(
  () => import('@/components/common/modal/popup-list-modal'),
  {
    ssr: false,
    loading: () => <p>loading...</p>
  }
)

const Home = () => {
  const [isShow, setIsShow] = useState<boolean>(false)
  return (
    <>
      <Button onClick={() => setIsShow(true)}>Click to Show Component </Button>
      {isShow && <DynamicComponent popupTgtScrn={'main'} />}
    </>
  )
}

export default Home

 

위 코드와의 유일한 차이점은 PopupListModal을 바로 import하지 않고 dynamic import로 import 했다는 점이다.

빌드 후에 브라우저에서 보면

 

page.tsx의 크기는 133kB로 줄었다.
그리고 버튼을 클릭했하면 useState가 true로 바뀌고

 

component가 랜더링 되면서 아래와 같이 별도의 1.3Mb짜리 .js을 가져온다.

이것이 Dynamic import를 이용한 lazy loading으로, 고객들의 UX를 개선시킬 수 있다.

 

공식문서 참조: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading