이미지 리스트 빠르게 로드하는 법

Question

안녕하세요. 현재 페이지당 이미지 16개정도를 보여주는 사이트를 만들고 있습니다.수파베이스를 이용해서 사진을 저장하고 이 때 메타데이터에 경로를 저장하고 있습니다.이후에 메타데이터를 통해 현재 페이지의 이미지 리스트를 불러온 다음 메타데이터에 포함된 경로를 createSignUrl에 인자로 사용해서 이미지를 불러온 후 바이너리데이터로 변환해 next.js 서버사이드에서 렌더하고 있는데 새로운 페이지를 불러오는데 4초 이상 걸립니다. 혹시 보통 여러개의 이미지를 storage에서 불러와서 클라이언트에서 보여줄 때(ex 쇼핑몰 아이템 사진들) 어떤 식으로 하는 것이 가장 보편적인가요?? 고수님들 도와주시면 감사하겠습니다.

Hmnya · Answer

일반적으로는 파일 저장시 섬네일 이미지를 같이 저장하는 방식을 쓰지 않을까 합니다.

개발잡부 · Answer

이미지 품질/사이즈 줄이기이미지를 서버에서 랜더링하지말고, 서버에서는 preSignedUrl에 대한 접근 url만 만들어주고 url을 통해 이미지 가져오기

xml개발자 · Answer

F12로 개발자 도구를 열어서 확인해보세요.이미지 용량 때문인지, 서버의 응답 속도 때문인지 확인이 필요합니다.

답변하면인사라도해주세요 · Answer

음 이미지를 ssr하는 시도는 처음보긴 합니다. 보통은 url로 따로 로드하지 않나요? 그마저도 썸네일을 따로 준비하구요

이미지 리스트 빠르게 로드하는 법

4개의 답변

기술 목록