Next.js Image의 최적화 및 캐시 과정 톺아보기

Optimizing: Images

Optimize your images with the built-in `next/image` component.

https://nextjs.org/docs/app/building-your-application/optimizing/images

• Size Optimization: 자동으로 WebP와 AVIF 포맷을 이용하여 각 디바이스 별로 적절한 사이즈 이미지들을 제공해준다.

• Visual Stability: 이미지가 로딩될때, 자동으로 CLS를 방지한다.

• Faster Page Loads: 사용자의 viewport에 이미지가 감지되면 로드(lazy loading)한다. 이때 blur placeholder도 제공

• Asset Flexibility: 원격 서버에 저장된 이미지의 경우에도 On-demand 이미지 크기 조정

Image Loader

// defaultLoader 함수 일부
function defaultLoader({
  config,
  src,
  width,
  quality,
}: ImageLoaderPropsWithConfig): string {

  (변환 코드)... 

  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${
    quality || 75
  }${
    process.env.NEXT_DEPLOYMENT_ID
      ? `&dpl=${process.env.NEXT_DEPLOYMENT_ID}`
      : ''
  }`
}

Squoosh와 Sharp

// sharp 유무 판별
if (sharp) {
	// Sharp 로직
    if (contentType === AVIF) {
			...
    } else if (contentType === WEBP) {
      transformer.webp({ quality })
    } else if (contentType === PNG) {
      transformer.png({ quality })
    } else if (contentType === JPEG) {
      transformer.jpeg({ quality, progressive: true })
    }

    optimizedBuffer = await transformer.toBuffer()
} else {
	// ⛔️ 우리가 흔히 볼 수 있는 경고문 ⛔️
    if (showSharpMissingWarning && nextConfigOutput === 'standalone') {
      Log.error(
        `Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly. Read more at: https://nextjs.org/docs/messages/sharp-missing-in-production`
      )
      throw new ImageError(500, 'Internal Server Error')
    }
    if (showSharpMissingWarning) {
      Log.warnOnce(
        `For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.\n` +
          'Read more: https://nextjs.org/docs/messages/sharp-missing-in-production'
      )
    }

   // Squoosh 로직
    const { processBuffer } =
      require('./lib/squoosh/main') as typeof import('./lib/squoosh/main')

    if (contentType === AVIF) {
      optimizedBuffer = await processBuffer(buffer, operations, 'avif', quality)
    } else if (contentType === WEBP) {
      optimizedBuffer = await processBuffer(buffer, operations, 'webp', quality)
    } else if (contentType === PNG) {
      optimizedBuffer = await processBuffer(buffer, operations, 'png', quality)
    } else if (contentType === JPEG) {
      optimizedBuffer = await processBuffer(buffer, operations, 'jpeg', quality)
    }
  }

실제 환경 비교

Cache

• MISS - 캐시되지 않았다. 첫번째 방문일 때, 적어도 한번은 발생

• STALE - 캐시되어 있지만 revalidate 시간을 지나 만료되었다. 업데이트 과정(다시 최적화)이 필요

• HIT - 캐시되어 있다.

Cache-Control 유형

여기서 재밌는 점은 이미지를 불러오는 방법에 따라서 Cache-Control이 변한다는 점이다.

import 이미지 from "/public/image/이미지.png"

<Image src={이미지} />

<Image src={"/public/image/이미지.png"} />

<Image src={"CDN 이미지 주소"} />