리액트쿼리 고수분들 도와주세요

Question

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다.

const { data, isLoading, fetchNextPage } = useInfiniteQuery(
    [getProducts, sortOption, sortOrder, filterValue, categoryName],
    async ({ pageParam = page - 1 }) => {
      const response = await api.post(`/cal/v1/product/${categoryName}`, {
        filter: filterValue,
        page: pageParam,
        query: ,
        size: size, => size: size - 8 /* 변경한 부분 */
        sort: [{ field: sortOption, option: sortOrder }],
      });

setTotalProduct(response.data.body.product.totalCount);
      return response.data.body.product.items;
    },
    {
      refetchOnWindowFocus: false,
      getNextPageParam: () => page,
    }
  );

위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다.

상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 
요청시간이 비정상적으로 커집니다. 
사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데
렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다.
**초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다**

코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 
왜 이런 문제가 발생하는지 궁금합니다.

이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 
알려주시면 감사하겠습니다!!

노우준 · Answer

안녕하세요
캐싱된 데이터는 빠르게 렌더링된다면, 서버에서 데이터를 요청할 때 지연이 발생한다는 것인데, 이는 네트워크 문제 혹은 API 백엔드 문제일 것이라고 생각합니다.
서버에서 비효율적인 쿼리를 사용중이거나, 데이터베이스와의 네트워크 연결 상태가 느리거나 등 여러 원인을 살펴봐야 할 것 같아요