[Next.js] Dynamic Import와 Suspense를 같이 쓰지 말기

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

const LazyComponent = dynamic(
	() => import('@/components/LazyComponent')
);

export default function MainPage() {
	return (
		<Suspense fallback={<div>Loading...</div>}>
        	<LazyComponent />
        </Suspense>
    );
}

위와 같이 Next.js에서 제공하는 dynamic(Dynamic Import)을 이용하면,

컴포넌트를 지연 로딩할 수 있어서 Suspense와 같이 사용하려고 했었는데요.

계속 테스트를 진행해도, Suspense의 fallback 컴포넌트가 보이질 않았습니다...

 

 

 

next/dynamic is a composite extension of React.lazy and Suspense, 
components can delay hydration until the Suspense boundary is resolved.

Next.js 공식 문서에서 dynamic import에 이런 설명이 있었습니다.

즉, dynamic 자체가 React.lazy + Suspense 기능을 제공하는 것인데요.

 

 

 

 

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(
	() => import('@/components/LazyComponent'),
    {
    	loading: () => <div>Loading...</div>
    }
);

export default function MainPage() {
	return (
		<LazyComponent />
    );
}

dynamic으로 불러온 컴포넌트를 Suspense로 감싸도 Suspense의 fallback 컴포넌트가 보이질 않습니다.

dynamic 옵션의 loading에 fallback 컴포넌트를 넣어주면 됩니다.

 

 

 

 

하지만... Suspense가 눈에 보이지 않아서, Suspense 바운더리를 바로 확인하기 어려울 것 같습니다.

개인적으로는 Suspense와 React.lazy를 직접 사용해서 컴포넌트를 지연로딩하는 게 낫지 않을까 싶습니다.

Suspense 바운더리를 한눈에 파악할 수 있기 때문입니다.

 

 

 

 

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(
	() => import('@/components/LazyComponent'),
);

export default function MainPage() {
	return (
		<Suspense fallback={<div>Loading...</div>}>
			<LazyComponent />
		</Suspense>
    );
}