Next14 서버컴포넌트의 이미지최적화
개인프로젝트에서 Next 14 버전을 사용해 봤는데, 전에 사용했던 12 버전과 많은 부분이 달라져서
14 버전 서버컴포넌트에서 이미지 최적화를 적용한 후기를 남깁니다.
일단 순수 리액트에서 csr 하던 방식으로 구현을 했습니다.
3g네트워크 환경에서 테스트를 했습니다. csr방식이니 일단 dom이 마운트 되고 나서
백엔드에 api호출을 합니다. 그리고 응답을 받으면 그제서야 응답에 포함된 image url에 요청을 해서 이미지를 받아옵니다.
유저는 api 네트워크 pending기간동안 흰 화면을 볼 수밖에 없습니다.
로딩처리 정도는 해줄수 있겠죠!
해당 api를 서버측에서 호출해서 서버컴포넌트로 랜더링 해보겠습니다.
이번에는 ssr을 적용했기 때문에 클라이언트에서 따로 네트워크 요청이 없이
html 자체에 img 태그를 전부 가지고 랜더링이 되었습니다.
다행히 유저가 네트워크의 pending을 기다리면서 흰 화면만 보는 시간은 없어졌습니다.
하지만 이미지 태그에 src가 들어가 있다고 해서 이미지까지 다운로드해서 줄 수는 없습니다.
클라이언트에서 이 이미지 다운로드에 시간이 걸리면서 위에서 아래로 천천히 이미지가 나오는 것은 여전하네요.
위 문제를 해결하기 위해 blur이미지 방식을 적용해보겠습니다.
서버컴포넌트에서 원격이미지 blur이미지를 삽입해 보겠습니다.
정적 이미지는 next/image 컴포넌트에 placeholder="blur" 옵션만 주면 알아서 블러처리까지 해주는 반면
원격 이미지는 좀 난감합니다. 원격에 어떤 이미지가 있을 줄 알고 blur처리를 할 수 있는지 좀 난감하죠.
app디렉토리의 서버컴포넌트에서 ssr데이터 패칭을 하는 방법은 링크를 참고해주세요
마치 훅을 호출하듯이 컴포넌트에서 getBanner라고 호출한 부분이 서버컴포넌트의 데이터 패칭하는 부분입니다.
원격이미지의 placeholder를 blur로 입력해 주면 blurDataUrl도 꼭 입력해줘야 합니다.
blurDataURL은 base64로 인코딩 된 데이터를 입력해 줍니다.
이렇게 하는 이유는 base64로 인코딩 된 문자열 자체가 이미지 이기 때문에 별도의 네트워크 없이 바로 보여줄 수가 있기 때문이라고 해요.
getBanner는 내부에서 fetch를 통해 배너 데이터를 가져옵니다. 그리고 이미지주소에 fetch 해서 로딩하려는 이미지의 buffer를 만들어 냅니다. 그리고 plaiceholder 라이브러리에서 가져온 getPlaiceholder메서드에 버퍼데이터를 넣어주면
base64로 인코딩 된 값을 반환합니다.
plaiceholder관련 내용은 링크 참고해 주세요
(https://plaiceholder.co/docs/plugins/next)
반환한 base64 인코딩 값도 banner 데이터에 노드로 추가하여 반환해 줍니다.
그리고 컴포넌트에서는 blurDataURL에 바로 이 base64 데이터를 입력해 줍니다.
이렇게 해주면 마지막 동영상에서 보듯이 별도의 네트워크 없이
이런 base64 인코딩 값으로 이미지 blur영역을 미리 채워주는 모습을 볼 수 있습니다.
이렇게 서버컴포넌트에서 원격이미지 blur방식으로 이미지 최적화를 적용해 봤습니다!