현재 회사 프로젝트는 NextJS를 사용하고 있다.
그리고 Image는 Next Image를 사용하고 있는데, Next Image는 이미지 최적화를 프론트엔드 개발자가 신경쓸 필요가 없다는 점에서 매우 큰 장점을 가지고 있다.
하지만 lazy loading이 걸림돌이 되었다. 현재 서비스에서는 한 페이지에 많은 이미지들을 보여주고 있다. 그런데 이미지들이 화면에 보여지는데 lazy loading으로 인해 빨리 보여지지 않으니 사용자가 보기에 매우 느린 서비스라고 느낄 가능성이 있다.
그런데 github issue를 확인해보니 Nextjs 10 버전 이후에 production 버전에서 lazy loading이 많이 느려졌다는 글을 보게 되었다. 그 이유는 기존에 built in 되어있던 패키지인 sharp가 빠져있고 다른 패키지를 사용하고 있기 때문이라고 한다.
뿐만 아니라 lazy loading이라고 하더라도 더 빠르게 화면에 보여줄 수 있는 방법들을 확인할 수 있었다. (cache, next config 설정 등)
회사에서 이 부분을 적용 후 실제 속도가 얼마나 빨라지는지 한 번 측정해볼 필요가 있을 것 같다.
