[Next.js] Dynamic Imports

Next.js에서의 Lazy Loading

Lazy Loading은 애플리케이션에서 요구되는 리소스를 필요할 때만 로드해서 로딩 속도를 개선하고 사용자 경험을 향상시키는 전략이다.

 

Next.js 에서 Lazy Loading 을 적용하는 방법으로는 두 가지가 있다.

1. Dynamic Imports 

2. React.lazy()와 Suspense

 

 

React.lazy()와 Suspense

React.lazy()는 React에서 제공하는 내장 기능으로 코드를 분할하여 필요한 시점에 비동기적으로 로드할 수 있도록 한다.

이와 함께 Suspense는 lazy 컴포넌트가 로드 되는 동안 대체해서 보여줄 요소를 지정할 수 있다.

 

React 프로젝트 시 React Router 라이브러리와 함께 사용해서 페이지 전환 로딩 중에는 다른 페이지와 상호작용하지 않도록 막을 수 있다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

 

 

next/dynamic

next/dynamic은 React.lazy()와 Suspense의 기능을 모두 합친 것이다.

dynamic 함수는 동적으로 로드할 컴포넌트와 관련된 설정 객체를 인자로 받는다. 두 번째 인자의 옵션으로 loading을 활용하면 Suspense의 fallback을 사용한 것 처럼 해당 컴포넌트가 로딩 중인 경우에 보여줄 요소를 지정할 수 있다.

import dynamic from 'next/dynamic';
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
});
 
export default function Home() {
  return <DynamicHeader />;
}

 

suspense 옵션을 활용하면 react의 Suspense와 유사한 컴포넌트를 사용할 수 있다.

import dynamic from 'next/dynamic';
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  suspense: true,
});
 
export default function Home() {
  return (<Suspense fallback={<p>Loading...</p>}>
    <DynamicHeader />
  </Suspense>);
}

 

 

참고

https://react.dev/reference/react/lazy

 

https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading

 

https://ko.legacy.reactjs.org/docs/code-splitting.html#route-based-code-splitting