next image
-
Next Image load super slowReact.js & Next.js 2023. 1. 4. 21:39
목차 문제 상황 대안 결과 응답 헤더 정리 문제 상황 현재 개발 중인 우리 웹 사이트는 next/Image를 통해 image 리소스를 제공하고 있습니다. next/image의 경우 기본 태그와 달리 원본 파일 형식(. jpg,. png, …)을 차세대 형식인 .webp 로 변환해주는 기능을 담당하고 있으며 이미지 크기(px, size 둘 다) 또한 최적화해 줍니다. 이번에 발생한 문제는 next/Image를 통해 렌더링 하려는 이미지 리소스(20-40 개 또는 그 이상)가 많을 때, 이미지 리소스 자체의 크기는 줄었지만, 화면에 이미지를 정상적으로 제공할 때까지의 시간이 너무 오래 걸린다는 것이었습니다. 이 모든 상황은 캐시가 되기 이전 최초 렌더링 상황에 대한 이야기로, 캐시가 된 이후에는 계속 성능을..
-
Next.js - next/image blur 사용하기React.js & Next.js 2022. 10. 19. 22:47
이전 게시글과 이어집니다! Next.js - SSG, getStaticProps Data Fetching: getStaticProps | Next.js Data Fetching: getStaticProps | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. n.. junheedot.tistory.com next/image 에서 제공하는 property인 placeholder=’blur’와 blurDataURL={ … }을 사용한다면, 블러를 통해 빈 이미지 공간을 이미지가 렌더링 될 때까지 효율적으로 제어할 수 있습니다. 하지만 다음..