Next.js의 레이지 로딩은 경로를 렌더링하는 데 필요한 JavaScript 양을 줄여 애플리케이션의 초기 로딩 성능을 향상시키는 데 도움이 된다.
레이지 로딩을 사용하면 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시킬 수 있으며, 필요할 때만 클라이언트 번들에 포함시킬 수 있다. ( 예: 사용자가 모달을 열 때까지 모달의 로딩을 지연 )
Next.js에서 레이지 로딩을 구현하는 두 가지 방법이 있다.
next/dynamic
을 사용한 동적 임포트React.lazy()
와 Suspense
를 사용기본적으로 서버 컴포넌트는 자동으로 코드를 분할하며, 스트리밍을 사용하여 서버에서 클라이언트로 UI 조각을 점진적으로 전송할 수 있다. 레이지 로딩은 클라이언트 컴포넌트에 적용된다.
next/dynamic
next/dynamic
은 React.lazy(
)와 Suspense
의 복합체다. app
과 page
디렉토리에서 동일한 방식으로 동작하여 점진적인 마이그레이션을 가능하게 한다.
// app/layout.js
'use client';
import { useState } from 'react';
import dynamic from 'next/dynamic';
// Client Components:
const ComponentA = dynamic(() => import('../components/A'));
const ComponentB = dynamic(() => import('../components/B'));
const ComponentC = dynamic(() => import('../components/C'), { ssr: false });
export default function ClientComponentExample() {
const [showMore, setShowMore] = useState(false);
return (
<div>
{/* Load immediately, but in a separate client bundle */}
<ComponentA />
{/* Load on demand, only when/if the condition is met */}
{showMore && <ComponentB />}
<button onClick={() => setShowMore(!showMore)}>Toggle</button>
{/* Load only on the client side */}
<ComponentC />
</div>
);
}
React.lazy()
와 Suspense를 사용할 때 기본적으로 클라이언트 컴포넌트는 사전 렌더링(SSR)된다.
특정 클라이언트 컴포넌트의 사전 렌더링을 비활성화하려면 ssr
옵션을 false
로 설정할 수 있다.
const ComponentC = dynamic(() => import('../components/C'), { ssr: false });
서버 컴포넌트를 동적으로 가져온 경우 서버 컴포넌트 자체가 아닌 서버 컴포넌트의 자식인 클라이언트 컴포넌트만 지연 로딩된다.
// app/page.js
import dynamic from 'next/dynamic';
// Server Component:
const ServerComponent = dynamic(() => import('../components/ServerComponent'));
export default function ServerComponentExample() {
return (
<div>
<ServerComponent />
</div>
);
}
import()
함수를 사용하여 필요한 시점에 외부 라이브러리를 로드할 수 있다. 이 예제에서는 퍼지 검색을 위해 외부 라이브러리인 fuse.js
를 사용한다. 사용자가 검색 입력란에 입력을 시작한 후에만 해당 모듈이 클라이언트에서 로드된다.
'use client';
import { useState } from 'react';
const names = ['Tim', 'Joe', 'Bel', 'Lee'];
export default function Page() {
const [results, setResults] = useState();
return (
<div>
<input
type="text"
placeholder="Search"
onChange={async (e) => {
const { value } = e.currentTarget;
// Dynamically load fuse.js
const Fuse = (await import('fuse.js')).default;
const fuse = new Fuse(names);
setResults(fuse.search(value));
}}
/>
<pre>Results: {JSON.stringify(results, null, 2)}</pre>
</div>
);
}
import dynamic from 'next/dynamic';
const WithCustomLoading = dynamic(
() => import('../components/WithCustomLoading'),
{
loading: () => <p>Loading...</p>,
},
);
export default function Page() {
return (
<div>
{/* The loading component will be rendered while <WithCustomLoading/> is loading */}
<WithCustomLoading />
</div>
);
}
이름 지정된 내보내기를 동적으로 가져오려면 import()
함수에서 반환된 Promise에서 해당 내보내기를 반환할 수 있다.
// components/hello.js
'use client';
export function Hello() {
return <p>Hello!</p>;
}
// app/page.js
import dynamic from 'next/dynamic';
const ClientComponent = dynamic(() =>
import('../components/ClientComponent').then((mod) => mod.Hello),
);
[ 출처 ]
https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading