[Next 14] Lazy Loading, Next/Dynamic (청크 분리, 코드스플리팅)

📝Lazy Loading

렌더링하는 데 필요한 JavaScript의 양을 줄여 애플리케이션의 초기 로딩 성능을 향상시키는 데 도움이 됩니다 → 해당 라이브러리가 필요할 때만 클라이언트 번들에 포함할 수 있습니다 [청크 분리]

 

Next.js에서 지연 로딩 구현하는 방법은 두가지이다

1. next/dynamic → React.lazy() + Suspense가 합쳐진 기능
2. React.lazy() [코드스플리팅 + 지연로딩] + Suspense [로딩 기능] → 리액트에서 사용하는 방식

 

예제 코드

/**  page.tsx **/
'use client'

import dynamic from "next/dynamic";

import {useState} from "react";

export default function Home() {

  const ComponentA = dynamic(() => import('../components/A'),{loading: () => <div>A Is Loading</div>})
  const ComponentB = dynamic(() => import('../components/B'))
  const ComponentC = dynamic(() => import('../components/C'), { ssr: false, loading: () =><div>C Is Loading</div> })

  const [showMore, setShowMore] = useState(false)

  return (
      <div>
        <ComponentA />

        {showMore && <ComponentB />}
        <button onClick={() => setShowMore(!showMore)}>Toggle</button>

        <ComponentC />
      </div>
  )
}

/**  A.tsx **/
export default function A() {

    return (
        <div> A </div>
    );
}

/**  B.tsx **/
export default function B() {

    return (
        <div> B </div>
    );
}

/**  C.tsx **/
export default function C() {

    return (
        <div> C </div>
    );
}

Lazy Loading을 사용하는 경우 클라이언트 구성요소는 기본적으로 사전 렌더링(SSR)됩니다

 

ssr:false 옵션으로 비활성이 가능합니다 → 좀 이상한 점이 처음에 렌더링 될 때 C는 C Is Loading이 나오고 A는 서버에서 렌더링 되어 A Is Loading이 안나오지만 Toogle을 클릭하면 둘다 Is Loading이 나오게 된다 Toogle은 훅으로 조작하고 A랑 C는 바뀐 점이 없기 때문에 가상돔 차이가 있는 B만 렌더링되어야하는데 A랑 C도 왜 그런지 모르겠다

 

 

Toggle 클릭 전 (A, C 청크 분리 확인)

 

Toggle 클릭 후 (B 청크 Lazy Loading 확인)