Next.js에서 동적 가져오기를 사용한 코드 분할

코드 분할 및 스마트 로드 전략으로 Next.js 앱의 속도를 높이는 방법입니다.

Milica Mihajlija

학습 내용

이 게시물에서는 다양한 유형의 코드에 대해 설명합니다. 분할을 알아보고 이를 사용하여 동적 가져오기를 사용하여 Next.js 앱의 속도를 높일 수 있습니다.

경로 기반 및 구성요소 기반 코드 분할

기본적으로 Next.js는 각 경로에 대해 JavaScript를 별도의 청크로 분할합니다. 사용자가 애플리케이션을 로드하면 Next.js는 초기 경로입니다. 사용자는 애플리케이션을 탐색할 때 청크를 가져옵니다. 경로를 지정합니다. 경로 기반 코드 분할은 한 번에 파싱 및 컴파일해야 하는 스크립트의 양이 많기 때문에 페이지 로드 시간 단축

경로 기반 코드 분할은 좋은 기본값이지만, 컴포넌트 레벨에서 코드 분할을 사용한 로드 프로세스입니다. 대규모 구성요소를 여러 개로 분할하는 것이 좋습니다. 이렇게 하면 중요하지 않거나 특정 사용자에게만 렌더링되는 사용자 상호작용 (예: 버튼 클릭)이 지연 로드될 수 있습니다.

Next.js는 동적 import()를 지원합니다. JavaScript 모듈 (React 구성요소 포함)을 가져올 수 있습니다. 각 가져오기를 별도의 청크로 로드합니다. 이를 통해 구성요소 수준의 코드 분할을 지원하며, 리소스 로드를 제어하여 사용자가 사이트에서 필요한 코드만 다운로드하여 파악할 수 있습니다. Next.js에서는 이러한 구성요소가 서버 측에서 렌더링되고 (SSR) 기본적으로 제공됩니다

동적 가져오기의 실제 작동 방식

이 게시물에는 간단한 앱 모음으로 구성된 샘플 앱의 여러 버전이 버튼을 클릭합니다. 버튼을 클릭하면 귀여운 강아지가 나타납니다. 따라서 앱의 각 버전을 살펴보면서 동적 가져오기가 정적 가져오기 그 사용법에 대해 배우게 될 것입니다.

앱의 첫 번째 버전에서는 강아지가 components/Puppy.js에 살고 있습니다. 받는사람 강아지를 페이지에 표시하면 앱이 Puppy 구성 요소를 index.js를 정적 가져오기 문으로 교체합니다.

import Puppy from "../components/Puppy";

Next.js가 앱을 번들로 묶는 방식을 확인하려면 DevTools에서 네트워크 추적을 검사합니다.

1. 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.

2. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.

3. 네트워크 탭을 클릭합니다.

4. 캐시 사용 중지 체크박스를 선택합니다.

5. 페이지를 새로고침합니다.

페이지를 로드하면 Puppy.js를 비롯하여 필요한 모든 코드가 구성요소가 index.js에 번들로 포함되어 있습니다.

Click me 버튼을 누르면 강아지 JPEG 요청만 네트워크 탭에 추가:

이 접근 방식의 단점은 사용자가 버튼을 클릭하지 않더라도 Puppy 구성요소를 로드해야 합니다. 이 구성요소가 index.js입니다. 이 예에서 별다른 문제는 아니지만 대규모 구성 요소를 로드하는 것이 있습니다.

이제 앱의 두 번째 버전을 확인해 보겠습니다. 여기서 정적 가져오기는 동적 가져오기로 대체됩니다. Next.js는 다음을 수행하는 next/dynamic를 포함합니다. 동적 가져오기를 사용할 수 있습니다.

import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";

// ...

const Puppy = dynamic(import("../components/Puppy"));

첫 번째 예의 단계에 따라 네트워크 트레이스를 검사합니다.

앱을 처음 로드하면 index.js만 다운로드됩니다. 이번에는 37.9KB에서 37.4KB로 줄어든 0.5KB Puppy 구성요소의 코드는 포함하지 않습니다.

이제 Puppy 구성요소가 별도의 청크(1.js)에 있으며 이 청크는 로드되기만 합니다. 을 누르세요.

</ph>

실제 애플리케이션에서 구성요소는 종종 더 큰 파일 및 지연 로딩 초기 JavaScript 페이로드를 수백 킬로바이트만큼 줄일 수 있습니다.

커스텀 로드 표시기를 사용한 동적 가져오기

리소스를 지연 로드할 때는 로드 표시기를 제공하는 것이 좋습니다. 배송될 수 있습니다. Next.js에서는 dynamic() 함수에 추가 인수:

const Puppy = dynamic(() => import("../components/Puppy"), {
  loading: () => <p>Loading...</p>
});

로드 표시기의 동작을 확인하려면 다음에서 느린 네트워크 연결을 시뮬레이션합니다. DevTools:

1. 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.

2. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.

3. 네트워크 탭을 클릭합니다.

4. 캐시 사용 중지 체크박스를 선택합니다.

5. 제한 드롭다운 목록에서 빠른 3G를 선택합니다.

6. 클릭해 주세요 버튼을 누릅니다.

이제 버튼을 클릭하면 구성요소와 앱을 로드하는 데 시간이 걸립니다. '로드 중...'이라는 메시지가 표시됩니다.

SSR이 없는 동적 가져오기

클라이언트 측에서만 구성요소를 렌더링해야 하는 경우 (예: 채팅 위젯)에서 ssr 옵션을 false로 설정하면 됩니다.

const Puppy = dynamic(() => import("../components/Puppy"), {
  ssr: false,
});

결론

동적 가져오기를 지원하는 Next.js는 구성요소 수준의 코드를 제공합니다. JavaScript 페이로드를 최소화하고 애플리케이션 성능을 로드 시간을 단축할 수 있습니다. 모든 구성요소는 기본적으로 서버 측에서 렌더링되며, 이 옵션을 사용 중지할 수 있습니다.