Nextjs 이미지 관련 질문입니더

Question

현재 쇼핑몰을 만들어보고 있습니다,
하지만 문제점이 보인다고 생각이 들어서 이렇게 질문을 남겨봅니다

카테고리는 
1. 브랜드 ( 나이키 아디다스 등등 )
2. 종류( 상의 하의 아우터 등등 )

이렇게 구성이 되어 있으며 usestate로 select 값을 저장하여
선택된 브랜드나 종류에 대한 api get 요청을 하여 데이터를 보여주고 있습니다. 
이부분도 카테고리가 변경될 때마다 요청 하는거라 이게 맞는건지 싶습니다

각 브랜드별 카테고리에 상품이 많게는 2천개정도 들어가있습니다
이렇다보니 카테고리를 변경할때마다 기존에 있던 이미지들이
보이는 상태로 전환이 되어 보기가 조금 안좋은거 같습니다
이를 해결할 방법이 무엇이 있을까요..

정재용 · Answer

올려주신 질문에 대해 제가 이해한 내용을 적어보자면,

매번 API를 호출해야 하는지에 대한 부분은, 
react-query의 캐싱을 활용해 보시면 좋을듯 합니다. 
(https://tanstack.com/query/latest/docs/react/examples/react/basic)

또한 많게는 2천개 정도 되는 상품을 한번에 조회해서 보여주기 보다는, 
pagination 처리를 통해, 퍼포먼스적인 부분을 높이는 건 어떨까 싶어요.

마지막으로 상태 전환의 경우, 현재 API 조회(react-query의 useQuery State)의 상태값등을 기준으로해서, 
로딩 스테이트 등 각 상황에 맞는 화면을 보여주시면 좋을것 같습니다.