Next.js에서 동적 가져오기를 사용한 코드 분할
코드 분할 및 스마트 로딩 전략으로 Next.js 앱 속도를 높이는 방법.
학습 내용 #
이 게시물은 다양한 유형의 코드 분할과 동적 가져오기를 사용하여 Next.js 앱 속도를 높이는 방법을 설명합니다.
경로 기반 및 구성 요소 기반 코드 분할 #
기본적으로 Next.js는 JavaScript를 각 경로에 대해 별도의 청크로 분할합니다. 사용자가 애플리케이션을 로드하면 Next.js는 초기 경로에 필요한 코드만 전송합니다. 사용자가 애플리케이션을 탐색할 때 다른 경로와 연결된 청크를 가져옵니다. 경로 기반 코드 분할 기능은 한 번에 구문을 분석하고 컴파일해야 하는 스크립트의 양을 최소화하므로 페이지 로드 시간이 훨씬 빨라집니다.
경로 기반 코드 분할이 좋은 기본값이지만 구성 요소 수준에서 코드 분할을 사용하여 로드 프로세스를 추가로 최적화할 수 있습니다. 앱에 큰 구성 요소가 있는 경우 별도의 청크로 분할하는 것이 좋습니다. 이렇게 하면 중요하지 않거나 특정 사용자 상호 작용(예: 버튼 클릭)에서만 렌더링되는 큰 구성 요소는 지연 로드될 수 있습니다.
Next.js는 JavaScript 모듈(React 구성 요소 포함)을 동적으로 가져오고 각 가져오기를 별도의 청크로 로드할 수 있는 동적 import() 기능을 지원합니다. 이렇게 하면 구성 요소 수준의 코드 분할이 가능하고 사용자가 보고 있는 사이트 부분에 필요한 코드만 다운로드하도록 리소스 로드를 제어할 수 있습니다. Next.js에서 이러한 구성 요소는 기본적으로 SSR(서버 측 렌더링)입니다.
동적 가져오기 실행 #
이 게시물에는 하나의 버튼이 있는 간단한 페이지로 구성된 샘플 앱의 여러 버전이 포함되어 있습니다. 버튼을 클릭하면 귀여운 강아지가 화면에 표시됩니다. 앱의 각 버전을 살펴보면서 동적 가져오기가 정적 가져오기와 어떻게 다른지 그리고 이를 사용하는 방법에 대해 알 수 있습니다.
앱의 첫 번째 버전에서 강아지는 components/Puppy.js에 있습니다. 앱은 페이지에 강아지를 표시하기 위해 정적 가져오기 설명문을 사용하여 index.js에서 Puppy 구성 요소를 가져옵니다.
import Puppy from "../components/Puppy";Next.js가 앱을 번들로 묶는 방법을 살펴보려면 DevTools에서 네트워크 추적을 검사하세요.
To preview the site, press View App. Then press Fullscreen
.Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Network tab.
Select the Disable cache checkbox.
Reload the page.
페이지 로드 시 Puppy.js 구성 요소를 포함하여 필요한 모든 코드는 index.js로 번들로 묶입니다.
Click me 버튼을 누르면 강아지 JPEG에 대한 요청만 네트워크 탭에 추가됩니다.
이러한 접근 방식의 단점은 사용자가 강아지를 보기 위해 버튼을 클릭하지 않더라도 index.js에 포함되어 있기 때문에 Puppy 구성 요소를 로드해야 한다는 것입니다. 이 간단한 예에서는 문제가 되지 않지만 실제 적용 시 필요할 경우에만 중요한 구성 요소를 로드하는 것이 상당한 개선으로 이어지는 경우가 종종 있습니다.
이제 정적 가져오기가 동적 가져오기로 대체된 두 번째 앱 버전을 살펴보도록 하겠습니다. Next.js에는 Next의 모든 구성 요소에 대해 동적 가져오기를 사용할 수 있는 next/dynamic이 포함되어 있습니다.
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));첫 번째 예의 단계에 따라 네트워크 추적을 검사합니다.
앱을 처음 로드하면 index.js만 다운로드됩니다. Puppy 구성 요소에 대한 코드가 포함되어 있지 않기 때문에 0.5KB 더 작습니다(37.9KB에서 37.4KB로 감소).
Puppy 구성 요소는 이제 버튼을 누를 때만 로드되는 별도의 청크 1.js에 있습니다.
실제 적용 시, 구성 요소가 훨씬 더 큰 경우가 많으며, 구성 요소를 지연 로드하면 초기 JavaScript 페이로드를 수백 킬로바이트까지 줄일 수 있습니다.
사용자 지정 로딩 표시기로 동적 가져오기 #
리소스를 지연 로드할 때 지연이 있는 경우에 대비하여 로드 표시기를 제공하는 것이 좋습니다. Next.js에서, dynamic() 함수에 추가 인수를 제공하여 이러한 작업을 수행할 수 있습니다.
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});로딩 표시기가 실행 중인지 확인하려면 DevTools에서 느린 네트워크 연결을 시뮬레이션하요.
To preview the site, press View App. Then press Fullscreen
.Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Network tab.
Select the Disable cache checkbox.
Throttling(스로틀링) 드롭다운 목록에서 **Fast 3G(고속 3G)**를 선택합니다.
클릭 미 버튼을 누릅니다.
이제 버튼을 클릭하면 구성 요소를 로드하는 데 시간이 걸리고 그 동안 앱이 "로드 중…" 메시지를 표시합니다.
SSR 없이 동적 가져오기 #
클라이언트 측에서만 구성 요소를 렌더링해야 하는 경우(예: 채팅 위젯) ssr 옵션을 false로 설정하여 이러한 작업을 수행할 수 있습니다.
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});결론 #
동적 가져오기를 지원하는 Next.js는 JavaScript 페이로드를 최소화하고 애플리케이션 로드 시간을 개선할 수 있는 구성 요소 수준 코드 분할 기능을 제공합니다. 모든 구성 요소는 기본적으로 서버 측에서 렌더링되며 필요할 때마다 이 옵션을 비활성화할 수 있습니다.