코드 분할과 동적 가져오기를 사용하여 Next.js 앱 속도를 높이는 방법을 설명하는 글을 보고 정리한다.
경로 기반 및 구성 요소 기반 코드 분할
Next.js는 JavaScript를 각 경로에 대해 별도의 청크로 분할한다. 사용자가 애플리케이션을 로드하면 Next.js는 초기 경로에 필요한 코드만 전송하고, 애플리케이션을 탐색할 때 다른 경로와 연결된 청크를 가져온다.경로 기반 코드 분할 기능은 한 번에 구문을 분석하고 컴파일해야 하는 스크립트의 양을 최소화하므로 페이지 로드 시간이 훨신 빨라진다.
구성 요소 수준에서 코드분할을 사용하여 로드 프로세스를 추가로 최적화할 수 있다. 앱에 큰 구성 요소가 있는 경우 별도의 청크로 분할하는 것이 좋다.
Next.js는 JavaScript(React) 모듈을 동적으로 가져오고 각 가져오기를 별도의 청크로 로드할 수 있는 동적 import() 기능을 지원한다. 이렇게 하면 구성 요소 수준의 코드 분할이 가능하고 사용자가 보고 있는 사이트 부분에 필요한 코드만 다운로드하도록 리소스 로드를 제어할 수 있다. Next.js에서 이러한 구성 요소는 기본적으로 SSR이다.
정적 import, 동적 import
// index.js
import Puppy from "../components/Puppy"; // Puppy.js위와 같이 정적 import를 사용하면, 페이지 로드 시 Puppy.js 구성 요 소를 포함하여 필요한 모든 코드는 index.js번들로 묶인다.
페이지에서 강아지 사진을 보여주는 버튼을 클릭하면, 강아지 JPEG에 대한 요청만 추가된다.
이러한 접근 방식의 단점은 사용자가 강아지를 보기 위해 버튼을 클릭하지 않더라도 index.js에 포함되어 있기 때문에 Puppy 구성 요소를 로드해야 한다는 것이다.
import dynamic from "next/dynamic";
//...
const Puppy = dynamic(import("../components/Puppy"));Next.js에는 Next의 모든 구성 요소에 대해 동적 import를 사용할 수 있는 next/dynamic이 포함되어 있다.
위와같은 import 상태로 앱을 처음 로드하면 index.js만 다운로드된다. Puppy 구성 요소에 대한 코드가 포함되어 있지 않기 때문에 용량도 더 작다.
Puppy 구성 요소는 이제 버튼을 누를 때만 로드되는 별도의 청크 1.js에 있게된다.
기본적으로, Next.js는 이러한 동적 청크 number.js에 이름을 지정한다.
실제 적용 시, 구성 요소가 훨신 더 큰 경우가 많으며, 구성 요소를 지연 로드하면 초기 JavaScript 페이로드를 수백 킬로바이트까지 줄일 수 있다.
사용자 지정 로딩 표시기로 동적 가져오기
리소스를 지연 로드할 때 지연이 있는 경우에 대비하여 로드 표시기를 제공하는 것이 좋다. Next.js에서, dynamic() 함수에 추가 인수를 제공하여 이러한 작업을 수행할 수 있다.
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});SSR 없이 동적 가져오기
클라이언트 측에서만 구성 요소를 렌더링해야 하는 경우(예: 채팅 위젯) ssr 옵션을 false로 설정하여 이러한 작업을 수행할 수 있다.
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});결론
동적 import를 지원하는 Next.js는 JavaScript 페이로드를 최소화하고 애플리케이션 로드 시간을 개선할 수 있는 구성 요소 수준 코드 분할 기능을 제공한다. 모든 구성 요소는 기본적으로 서버 측에서 렌더링되며 필요할 때마다 이 옵션을 비활성화할 수 있다.
출처 : https://web.dev/i18n/ko/code-splitting-with-dynamic-imports-in-nextjs/
