Lazy-loading & preload / Suspense로 Component 성능 최적화하기

김현준·2024년 12월 23일

SEO와 코드 최적화

목록 보기

5/7

lazy

컴포넌트, 이미지 등 리소스가 필요해지는 순간까지 로딩을 미루는 것
이를 통해 초기 번들 크기를 줄이고 초기 로딩 속도를 개선할 수 있다.

preload

Lazy-loading과 반대로 리소스를 미리 로드하는 것
예를 들면 Modal이 존재하는 페이지에 진입했을 때, 페이지 로드가 완료되면 Modal 컴포넌트를 미리 로드해서 사용자가 Modal의 로딩 시간 이후에 Modal을 클릭하게 된다면 바로 보여줄 수 있도록 하는 것

리액트 서스펜스를 사용하는 이유와 사용법 총정리

Suspense는 데이터 로딩으로 인한 사용자 경험의 저하를 해결하는 데 큰 도움을 준다
Suspense와 lazy를 함께 사용하면 초기 로딩 속도를 개선할 수 있다.
- 필요한 컴포넌트만 먼저 로드하고 나머지는 필요할 때 로드하는 방식으로 초기 로딩에 걸리는 시간을 최적화
Suspense 중첩을 통해 로딩 순서를 정할 수도 있다.(공식문서)

[React+TypeScript] Lazy-loading & preload로 Component 성능 최적화하기

React 19에서의 Preload

React 19 이전과 달리 React 19는 기본적으로 preload API를 제공한다.
React 19에서는 preload와 preloadModule을 통해 리소스나 모듈을 미리 로드할 수 있다. Modal과 같은 컴포넌트에 Preload를 적용하면 사용자가 클릭하기 전에 리소스를 미리 준비할 수 있어 딜레이를 줄이고 UX를 개선할 수 있다.

React 19에서 Preload를 사용하는 방법

1. 간단한 Preload 예제

import React, { lazy, Suspense } from 'react';
import { preload } from 'react-dom';

const Modal = lazy(() => import('./Modal'));

function MyComponent() {
  const handlePreload = () => {
    preload('./Modal'); // Modal 컴포넌트를 미리 로드
  };

  return (
    <div>
      <button onMouseEnter={handlePreload} onClick={() => console.log('Open Modal')}>
        Open Modal
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <Modal />
      </Suspense>
    </div>
  );
}

1. preload API 사용
react-dom의 preload를 호출해 컴포넌트를 미리 로드한다.
2. onMouseEnter 이벤트 활용
사용자가 버튼에 마우스를 올리는 순간 Modal 컴포넌트를 미리 로드한다.

2. PreloadModule을 사용한 ESM 모듈 미리 로드

React 19에서는 ESM 모듈을 미리 로드할 수 있는 preloadModule API도 제공된다.

import React, { lazy, Suspense } from 'react';
import { preloadModule } from 'react-dom';

const Modal = lazy(() => import('./Modal'));

function MyComponent() {
  const handlePreload = () => {
    preloadModule('./Modal'); // ESM 모듈 미리 로드
  };

  return (
    <div>
      <button onMouseEnter={handlePreload} onClick={() => console.log('Open Modal')}>
        Open Modal
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <Modal />
      </Suspense>
    </div>
  );
}

1. preloadModule API 사용
react-dom의 preload를 호출해 컴포넌트를 미리 로드한다.
2. 동일한 이벤트 활용
사용자가 버튼에 마우스를 올리는 순간 Modal 컴포넌트를 미리 로드한다.

React 19 이전의 직접 구현 방식과 비교

React 19 이전에는 직접 preload 메서드를 구현해야 했지만, React 19에서는 react-dom에서 제공하는 기본 API를 사용하여 이를 간단히 처리할 수 있다.

React 19 이전: 직접 구현

const modalPromise = import('./Modal');
const Modal = React.lazy(() => modalPromise);
Modal.preload = () => modalPromise;

function MyComponent() {
  useEffect(() => {
    Modal.preload(); // Modal 컴포넌트를 미리 로드
  }, []);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Modal />
    </Suspense>
  );
}

React 19 이후: API 활용

import { preload } from 'react-dom';

const Modal = React.lazy(() => import('./Modal'));

function MyComponent() {
  useEffect(() => {
    preload('./Modal'); // Modal 컴포넌트를 미리 로드
  }, []);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Modal />
    </Suspense>
  );
}