Next.js 에서는 next/dynamic 이란 것을 지원합니다.

이는 페이지를 랜더링 할때 필요한 JavaScript의 양을 줄여서 초기 로딩 성능을

향상시킬수 있습니다.

import dynamic from 'next/dynamic'
import { Suspense } from 'react

// suspense 사용
const DynamicButton = dynamic(() => import('@components/common/button'), {
    suspense: true,
});

// suspense 미사용
const DynamicButton = dynamic(() => import('@components/common/button'), {
    loading: () => <div>Loading...</div>
});

export default function Home() {
  return (

		// suspense 사용
    <Suspense fallback={`Loading...`}>
      <DynamicButton />
    </Suspense>

		
		// suspense 미사용
		<DynamicButton />
  )
}

• 먼저 위와 같은 형태로 button 컴포넌트를 import를 해옵니다
• 그후 <Suspense> 태그로 button 태그를 감싸주고, fallback 안에 지연 로딩 되는동안 보여줄 것을 작성하면 다른 컴포넌트들이 다 로딩이 되는 동안 해당 로딩이 보여지며, 완료되면 button 컴포넌트가 보여지게 됩니다.
• <Suspense> 태그를 사용하지 않고 상단에서 loading 에대한 코드를 작성할수도 있다.