Next.js Image Optimization 문제점: 최적화 과정 과부하

Next는 리액트 프레임워크이다. 

엄청 좋은 기능들을 제공하는데, 그중 큰 장점은 Image 최적화도 알잘딱깔센으로 제공한다는 것이다.

Image/next 컴포넌트의 props를 하나하나 읽어보면 얼마나 편리한지 알 수 있다.

https://blog.logrocket.com/next-js-automatic-image-optimization-next-image/

Next.js automatic image optimization with next/image - LogRocket Blog

기본적인 Image/next를 사용하는 방법에대해 잘 설명이 되어있다.

 

근데 무슨 문제가 있고 과부하란게 무슨 소리냐?

일단 실제 기능을 만들면서 이상한 경험을 해서 공부하게 되었다.

위 첨부된 사진을 보면 똑같은 image를 네트워크를 통해 받아와서 프론트에서 띄워준다.

당연히 넥스트의 장점인 image optimization을 이용했으므로 최적화된 사이즈와 webp형식과 품질을 설정했다.

근데 저렇게 어떤 경우에는 12ms 만에 로딩이 되는 반면 가끔 1230ms까지 걸리는 경우가 있었다. 무려 100배 차이가 난다.

이유를 찾아보기 위해 NEXT는 어떻게 SSR을 하는지, Image optimization은 어떻게 이루어지는지 공부해볼 필요가 있었다.

NEXT는 내부적으로 nodejs express서버를 운영한다. 클라이언트 서버라고 하는데 위 그림에서는 frontend server로 표현했다.

브라우저에서 바로 백엔드로 fetch 하는 전형적인 csr을 하는 리액트와 달리 NEXT가 SSR을 할 때는 클라이언트 서버를 통해

페이지를 요청하고 클라이언트 서버는 백엔드 서버에 데이터를 요청한다. 그리고 백엔드로부터 데이터를 받아서 페이지를 완성하고 

데이터가 들어간 html을 응답해준다. 그래서 브라우저는 로딩 없이 데이터가 pre render 된 상태의 html을 바로 띄울 수 있는 것이다.

 

내 생각에는 Image/next를 활용하면 이 과정이 런타임에서 비슷하게 발생한다.

이미지가 필요한 페이지가 랜더링 되면 런타임 과정에 클라이언트 서버는 백엔드 서버에 이미지 소스를 요청하고 백엔드 서버는

이미지 소스를 응답해준다. 그럼 NEXT의 클라이언트 서버(express)는 Image컴포넌트에서 입력했던 width, height 등의 props에 따라

이미지 최적화를 시작한다. 사이즈를 줄이고 품질을 낮추고 webp형식으로 바꿔서 브라우저에 전달하면 브라우저는 훨씬

쉽고 빠르게 이미지를 로딩할 수 있다.

 

여기서 문제가 발생했다.

뷰포트에 총 10개의 이미지가 동시에 뜨는 페이지가 있었는데(경고문을 지우고 싶어서 priority까지 입력함..)

그럼 이미지 최적화가 아래와 같은 모양으로 진행된다.

이미지를 빨리 로드하기 위해 최적화하는 건데, 그 과정 자체가 클라이언트 서버에 과부하된 것 같다.

참고했던 블로그인데,

"이미지를 생성하는 것은 CPU와 RAM을 적극적으로 사용하는 연산 과정이다..

캐시가 없고 lazyloading 하지 않는 상황에서(딱 내상황) 10개의 이미지를 불러온다면

10개의 연산 과정을 서버에서 동시에 처리하게 되는 것이다."

 

해결

일단 carousel을 이용하는 부분이 있었는데, priority를 지우고 네트워크 탭을 확인해보니 지금 보이는 이미지, 그리고 바로 다음에 보일 이미지만 받아오는 것을 확인했다. 즉, 보이지도 않을 이미지를 한꺼번에 fetch하지 않도록 priorty를 지웠다.

그리고 unoptimize를 true로 설정해서 클라이언트 서버가 Image optimization에 CPU를 사용하지 않도록 설정했다.

그 대안으로 aws Lambda@Edge를 활용해서 On-The-Fly방식의 이미지 리사이징 기능을 이용했다.

https://medium.com/daangn/lambda-edge%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94-on-the-fly-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95-f4e5052d49f3

AWS Lambda@Edge에서 실시간 이미지 리사이즈 & WebP 형식으로 변환

해결방법에 팁을 주신 팀원분께서 만들어놓은 기능인데 s3버킷에 이벤트를 설정할 수 있는 기능이 있는 것 같다.

(좀 더 공부해서 포스팅 예정입니다!)

코드에서는 단순히 백엔드에서 준 src에 path만 조금 바꿔줌으로써 이 cloudFront를 이용할 수 있었다.

첫 로딩에서도 이미 리사이징 되어 있는 버킷에서 꽤 빠르게 받아왔고, 두 번째부턴 cdn을 이용해 캐시를 사용할 수 있다.

 

 

https://uploadcare.com/blog/next-js-image-optimization/

Next.js image optimization techniques | Uploadcare Blog