next image blurDataURL 직접 부여하기

들어가며

Next.js에서 next/image를 사용하면 Image Optimization을 활용할 수 있다.

필자도 현록을 개발하면서 LCP 시점을 개선하기 위한 방법을 찾던 중 알게 됐는데,
파면 팔수록 Vercel은 정말 무서울 지경이다.

오늘은 여기서 placeholder prop에 blur를 부여하고 blurDataURL prop value를 직접 부여하는 경우를 다뤄보겠다.

blurDataURL은 lazy load 과정에서 이미지가 모두 load되기 전 보여줄 작은 Data URL 값을 받는다.
src prop에 정적 이미지 파일을 직접 import해서 넘기면 Next.js가 blur placeholder를 자동으로 생성할 수 있다.
다만 포스트 thumbnail처럼 문자열 경로를 동적으로 넘기는 경우에는 blurDataURL을 직접 만들어 넘겨야 한다.

구현하기

우선 npm package인 plaiceholder를 설치한다.
비슷한 다른 라이브러리도 있나 궁금해서 찾아보았지만 딱히 찾지 못했고, Next Doc에서도 가이드로 권장하고 있었다.
만약 blur 이미지를 만들어주거나 캐싱하는 서버가 있다면, 굳이 설치하지 않고 서버로부터 API를 fetch하여 해당 값을 prop으로 넘기면 된다.

사용법은 정말 간단하다.
아래와 같이 getPlaiceholder함수를 import하여 사용하면 base64로 encode된 이미지 객체를 얻을 수 있다.
이를 next/image component에 blurDataURL로 그대로 넘겨주면 된다.

import fs from 'fs'
import path from 'path'
import { getPlaiceholder } from 'plaiceholder'

const thumbFileBuffer = fs.readFileSync(path.join(process.cwd(), 'public', item.metadata.thumb.replace(/^\//, '')))
const { base64 } = await getPlaiceholder(thumbFileBuffer, { size: 32 })

필자는 포스트 목록에서 lazy load 과정에서 보여줄 blur image를 띄울 때 사용하였는데,
Pages Router에서는 getStaticProps, App Router에서는 서버에서 포스트 데이터를 만드는 단계에서 함께 처리하도록 하여 빌드 시점에 모두 생성하도록 하였다.

주의할 점

low quality로 optimized된 이미지이지만 말 그대로 이미지 데이터이기 때문에
런타임마다 반복 생성하기보다는 빌드 시점에 만들거나 캐싱해서 사용하는 편이 좋다.