[React Query] Prefetching 개념

[React Query] Prefetching 개념

 

preFetching은 페이지나 컴포넌트를 렌더링하기 전에 데이터를 사전에 미리 불러오는 기능을 의미한다.

이는 사용자가 특정 페이지로 이동하거나 컴포넌트를 렌더링하기 전에 필요한 데이터를 미리 가져와서 사용자 경험을 최적화할 수 있게 해준다.

 사용자가 특정 게시물 페이지에 cacheTime보다 오래 머물 수도 있다.

Pagination을 구현할 때 페이지가 캐시에 없기 때문에 Next page 버튼을 누를 때마다 페이지가 로딩되길 기다려야 한다.

데이터를 미리 가져와 캐시에 넣어서 사용자가 기다릴 필요 없도록 할 수 있다.

이렇게 추후 사용자가 사용할 법한 모든 데이터에 프리페칭을 사용합니다

다수의 사용자가 웹사이트 방문 시 통계적으로 특정 탭을 누를 확률이 높다면 해당 데이터를 미리 가져오는 게 좋다.

const queryClient = useQueryClient();

prefetch 쿼리는 queryClient의 메서드이다.

useQueryClient라는 Hook을 통해 queryClient를 가져올 수 있다. 

  useEffect(() => {

    if (currentPage < maxPostPage) {

      const nextPage = currentPage + 1;

      queryClient.prefetchQuery(["posts", nextPage], () =>

        fetchPosts(nextPage)

      );

    }

  }, [currentPage, queryClient]);

 

useEffect를 사용하여 현재 페이지에 생기는 변경 사항을 활용한다.

useEffect 의존성 배열에는 currentPage를 입력한다.

현재 페이지가 변경될 때마다 queryClient.prefetchQuery를 실행한다.

prefetchQuery의 인수는 useQuery의 인수와 아주 흡사하며 이때 필요한 쿼리 키는 useQuery에 사용한 쿼리 키와 똑같은 모습을 하고 있다.

이 때 다음 페이지가 무엇이든 데이터를 미리 가져와야 하며 currentPage + 1로 nextPage를 설정한다.

  const { data, isLoading, isError, error } = useQuery(

    ["posts", currentPage],

    () => fetchPosts(currentPage),

    {

      staleTime: 2000,

      keepPreviousData: true,

    }

  );

 

keepPreviousData를 true로 설정하면 쿼리 키가 바뀔 때도 지난 데이터를 유지해서 이전 페이지로 돌아갔을 때 캐시에 해당 데이터가 있도록 만들 수 있다.