Prefetching을 해야하는 이유

prefetching

페이지네이션을 하고 다음 페이지로 넘어갈 때, prefetching을 하지 않으면 "로딩중..." 이런 메시지가 보이게 된다. 이는 사용자 경험에 좋지 않다. 그렇기에 prefetching을 해야 한다.
prefetching은 데이터를 캐시에 추가하며 구성할 수 있지만 기본값은 stale(만료) 상태이다. 그러고 데이터가 필요할 때 stale 상태에서 데이터를 다시 가져오고 이때 캐시에 있는 만료되지 않은 데이터를 이용한다. 그렇기에 추후에 사용자가 사용할 법한 데이터를 prefetching 하면 좀 더 개선된 사용자 경험을 제공할 수 있다. 페이지네이션에서는 다음 페이지의 데이터를 prefetchig 하면 된다.

사용 방법

페이지네이션을 예시로 들면 다음 페이지로 넘어가는 버튼을 눌렀을 때, prefetching 하는 것은 좋은 방법은 아니다. 상태 변화가 비동기로 일어나서 이미 업데이트가 진행되었는지 알 방법이 없다. 그리고 현재 페이지가 무엇인지 정확히 알 수가 없다. 그렇기에 useEffect를 활용해 현재 페이지에 생기는 변경 사항을 활용해야 한다.
 
-다음 페이지 데이터를 prefetching

  const queryClient = useQueryClient();

  useEffect(() => {
    if (currentPage < maxPostPage) {
      const nextPage = currentPage + 1;
      queryClient.prefetchQuery(["posts", nextPage], () =>
        fetchPosts(nextPage)
      );
    }
  }, [currentPage, queryClient]);

prefetching을 위해 queryClient를 먼저 선언한다. 그리고 currentPage는 현재 페이지 번호이고 maxPostPage는 마지막 페이지라 마지막 페이지 이전이면 prefetchQuery을 사용하여 미리 데이터를 캐싱한다. 그리고 queryClient에 의존하고 있어서 의존성 배열에 넣어줬다.
 
-이전 페이지 데이터 캐싱하기

  const { data, isLoading, error, isError } = useQuery(
    ["posts", currentPage],
    () => fetchPosts(currentPage),
    {
      staleTime: 2000,
      // 이전 페이지로 돌아갔을 때를 위한 캐시
      keepPreviousData: true,
    }
  );

현재 페이지를 불러오는 쿼리에서 keepPreviousData를 true로 하면 이전 페이지 데이터도 캐시 되어 좋다. 여기서 keepPreviousData를 쓰면 이전 데이터까지 다 보여줘서 유용하다.