React.lazy and (next.js) Suspense

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고
간편하게 컴포넌트 코드 스플리팅을 할 수 있다고 한다.

React.lazy

컴포넌트를 렌더링 하는 시점에
비동기적으로 로딩할 수 있게 해주는 유틸 함수

const SplitMe = React.lazy(() => import('./SplitMe'));
// ./SplitMe를 불러오는 것 같다.

Suspense

• 리액트 내장 컴포넌트
• 코드 스플리팅된 컴포넌트를 로딩하도록 발동 시킬 수 있고,
• 로딩이 끝나지 않았을 때 보여줄 UI를 설정할 수 있음

import React, { Suspense } from 'react';

(...)
<Suspense fallback={<div>loading...</div>}>
  <SplitMe />
</Suspense>

• Suspense에서 fallback props를 통해 로딩 중에 보여 줄 JSX를 지정할 수 있습니다.

Dynamic Import

• https://nextjs.org/docs/advanced-features/dynamic-import

With suspense

Full SSR support in concurrent mode is still a work-in-progress.

• 동시 모드에서 전체 SSR 지원은 아직 진행 중입니다.

고찰

한 페이지에 많은 정보를 담고 있어서 스크롤이 길게 있는 경우에
일정 화면에 보이지 않는 아래쪽에선 로딩을 하고 있지 않다가
스크롤을 내려서 아래쪽 컨텐츠가 화면에 보여야 할 때 React.lazy와 Suspense를 사용하면 좋을 것 같다.

• 그런데 찾아보니 스크롤 위치에 따라 이미지를 불러오게 하는 것은 직접 만들어야 되는 것 같다.

  • https://velog.io/@ansrjsdn/React.lazy-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0
  • 지연로딩으로 로딩 최적화
  • 나중에 직접 만들어보기

• React.lazy로 불려지는 모듈은 Promise로 반환되어야 한다고 한다.

  • https://ko.reactjs.org/docs/code-splitting.html#reactlazy

• 나중에 나현님이 구현할 것을 보고 좀 더 자세히 파악해봐야겠다.

참고

• https://thebook.io/080203/ch19/02/02/
• https://nextjs.org/docs/advanced-features/dynamic-import#with-suspense
• 프론트 엔드 성능 최적화