[Next.js] 이미지 로딩에 대해

Next.js의 이미지 로딩 이슈와 해결 방법

최근 과제를 진행하면서 챔피언 리스트에서 특정 캐릭터의 상세 정보를 확인할 때 발생하는 이미지 로딩 지연 문제를 발견했습니다.

문제 상황

상세 페이지에 들어가면 챔피언의 스킬 정보와 함께 각각의 스킬 이미지가 표시되도록 만들었다. 그런데 일부 챔피언 상세 페이지에서는 스킬 이미지가 바로 로드되는 반면, 다른 페이지에서는 이미지가 1초에서 3초 정도 늦게 나타나는 문제가 있었습니다.

문제 확인

기본 HTML의 <img> 태그와 Next.js의 Next/Image 컴포넌트를 비교

• <img> 태그는 별도의 lazy loading(지연 로딩) 설정이 없기 때문에 브라우저가 페이지 렌더링 시 바로 이미지를 로드

원인

원인 : Next.js의 Next/Image 컴포넌트가 기본적으로 lazy loading(지연 로딩)을 사용하기 때문

Lazy loading이란

• 사용자가 현재 보고 있는 영역에 노출되는 이미지들만 우선 로드
• 나머지는 스크롤 등으로 실제 화면에 나타날 때 로드함으로써 초기 로딩 속도를 개선하는 기법
• 따라서 캐시에 이미지가 없거나 아직 해당 영역에 도달하지 않은 경우, 이미지 로딩이 지연되는 현상이 발생

해결 방안

1. Next/Image 컴포넌트에 priority 속성 사용 (강제 로드)

• 해당 이미지를 초기 로딩 시 우선적으로 로드하도록 지시

2. Next/Image 컴포넌트에 loading="eager" 속성 사용 (강제 로드)
   lazy loading 대신 이미지를 즉시 강제 로드

   {championDetail.spells.map((spell) => (
        <div key={spell.id} className="flex flex-row items-center space-x-8">
          <div>
            <span>스킬 : {spell.id.slice(-1)}</span>
            <Image
              priority // 1번째 방법
              loading="eager" //2번째 방법
              src={`${SERVER_URL}/cdn/${VERSION}/img/spell/${spell.image.full}`}
              alt={spell.name}
              width={70}
              height={70}
            />
          </div>
          <img
            src={`${SERVER_URL}/cdn/${VERSION}/img/spell/${spell.image.full}`}
          />