심화 프리페칭

프리페칭은 캐시에 아직 데이터가 없는 경우 미리 데이터를 채울 수 있다.

 

prefetchQuery는 queryClient의 메서드이다. 그렇기에 useQuery와 달리 클라이언트 캐시에 추가된다. prefetchQuery는 일회성이다. queryClient를 반환하고 useQuery 클라이언트 hook을 사용한다.

방문할 사이트 예측하는 프리페칭

어떤 사이트에서 홈 화면을 거치고 나서 다른 페이지를 방문할 확률이 높다면 방문할 페이지의 데이터를 미리 프리페칭하는 것이 좋다. 이 예시에서는 홈 화면에 미리 데이터를 프리페칭하는 코드이다.

 

-커스텀 훅

export function useTreatments(): Treatment[] {
  // fallback을 기본 값으로 둬야 처음에 잠깐 빈 값이 나왔다가 데이터가 다 불러와지면 보여준다.
  const fallback = [];

  // key를 이런식으로 하면 오타를 낼 일이 없다.
  // 쿼리 키를 일관적으로 해야 캐시된 데이터를 캐시가 잘 제공할 수 있다.
  const { data = fallback } = useQuery(queryKeys.treatments, getTreatments);
  return data;
}

export function usePrefetchTreatments(): void {
  const queryClient = useQueryClient();
  queryClient.prefetchQuery(queryKeys.treatments, getTreatments);
}

useTreatments 훅은 데이터를 가져오는 커스텀 훅이고, usePrefetchTreatments는 홈 화면에서 미리 프리페칭을 하기 위한 커스텀 훅이다. 여기서 key를 같은 것을 써야 어느 데이터를 찾아야 하는지 알려주기 때문에 같은 key를 사용하는 것이 중요하다.

 

-Home.tsx

export function Home(): ReactElement {
  usePrefetchTreatments();

  return (
  ...
  );
}

이 Home은 동적이지 않아서 리렌더가 많이 일어나지 않는다. 그렇기에 그냥 usePrefetchTreatments를 사용해도 된다. 만약 리렌더링이 걱정되면 usePrefetchTreatments에 가서 staleTime, cacheTime을 설정해 주는 옵션을 설정하여 모든 트리거마다 refetching을 하지 않아도 된다.

useEffect로 리렌더링을 막을 수 있지 않을까라고 생각할 수 있지만 hook 안에 hook은 사용할 수 없기 때문에 useEffect를 사용하지 못한다.

다음 달로 넘어가기 전에 프리페칭

이 사이트는 매 달마다 예약된 것을 그 날짜에 보여주는 사이트이다.

 

-프리페칭을 위한 코드

  const queryClient = useQueryClient();
  useEffect(() => {
    const nextMonthYear = getNewMonthYear(monthYear, 1);
    queryClient.prefetchQuery(
      [queryKeys.appointments, nextMonthYear.year, nextMonthYear.month],
      () => getAppointments(nextMonthYear.year, nextMonthYear.month),
    );
  }, [queryClient, monthYear]);
  
  const fallback = {};

  const { data: appointments = fallback } = useQuery(
    [queryKeys.appointments, monthYear.year, monthYear.month],
    () => getAppointments(monthYear.year, monthYear.month),
  );

useEffect를 사용하여 monthYear가 바뀌면, 즉 다음 달로 넘어가면 그다음 달 데이터까지 미리 불러와서 프리페칭을 해준다.

useQuery에서 KeepPreviousData가 필요 없는 이유는 다음 달로 넘어가면 이전 달의 데이터는 필요 없기 때문이다.

 

devtool을 보면 다음 달 데이터도 미리 불러와 있는 것을 볼 수 있다.