들어가며

NextJS를 사용하면, 무조건 거치게 되는 기능이 있다.
바로 Image Optimization이다.

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

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

blurDataURL는 lazy load 과정에서 이미지가 모두 load되기 전 보여줄 poster의 base64 값을 받는다.
src prop에 이미지를 직접 JS로 import하여 value를 넘기면 자동으로 생성해주는데,
필자의 경우엔 포스트들의 thumbnail src는 dynamic한 값이기도 했고, 직접 넘겨주는 법도 궁금한 겸 구현을 해보았다.

구현하기

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

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

{
  const thumbPoster = (await getPlaiceholder(item.metadata.thumb, { size: 32 })).base64,
}

필자는 포스트 목록에서 lazy load 과정에서 보여줄 blur image를 띄울 때 사용하였는데,
getStaticProps에서 포스트 목록을 로드할 때 함께 처리하도록 하여 빌드 시점에 모두 가져오도록 하였다.

주의할 점

low quality로 optimized된 이미지이지만 말 그대로 이미지이기 때문에
런타임에서 데이터를 관리할 때, memory leak을 항상 주의해야 할 것 같다.