React-Query와 NextJS

NextJS도, ReactQuery도 사전에 데이터를 fetch하거나, 캐싱 할 수 있다.
둘의 차이점은 어떻고 같이 사용했을때 좋은점에 대해 소개한다.

차이

NextJS

SSR을 사용 할 경우 페이지 요청시 서버에서 데이터를 가져온 후, HTML이 렌더링 되어 클라이언트로 전달된다.
클라이언트에서 이 데이터를 캐시하려면 별도로 관리해야한다.

데이터 공유가 어려운 서버컴포넌트에서의 데이터 fetching문제를 해결하기 위해 사용되며, 엔드포인트와 옵션을 기준으로 관리된다.

서버 store에 캐싱데이터가 저장된다

ReactQuery

클라이언트 측에서 자동으로 데이터를 캐싱하고, 데이터가 업데이트 되면 해당 데이터를 자동으로 갱신 할 수 있다.
중복 네트워크 요청을 줄이고, 특정시간 동안 캐싱된 데이터를 유지할 수 있다.

클라이언트 사이드 데이터 fetching 과정에서 비용절감을 위해 사용되며, queryKey를 기준으로 관리된다.

클라이언트의 query Store에 캐싱데이터가 저장된다.

어느정도 대체하여 사용 할 수 있지만, 서로의 관심사가 다르기 때문에 화면을 최적화 하는데에 두 기술을 모두 사용하는것이 도움이 된다.

같이 사용할 때 장점

개인화된 요청은 서버에 캐싱되어선 안되기 때문에 fetch를 사용한다면 no-store 옵션이 사용되어야 한다.

페이지가 로드되거나 캐싱이 만려될때마다 호출이 발생하기 때문에 React-Query를 통해 개인화된 요청에 대해서만 캐시를 관리하는 것이 적절하다.

Servier Side의 데이터를 클라이언트에 전달하는데 Props Drilling을 방지하기 위한 기능들을 제공한다.
Prefetch와 hydration api를 사용 할 수 있다.

클라이언트에서 사전에 불러오는 상태에 대한 값이나, 사용자 별로 변화해야 하는 데이터에 유연하게 대처하기 위해 둘을 함께 사용하는 것이 장점이 있다.

사용예시

import { QueryClient, dehydrate } from 'react-query';
import { useQuery, Hydrate } from 'react-query';
import axios from 'axios';

// 데이터 패칭 함수
const fetchData = async () => {
  const { data } = await axios.get('https://api.example.com/data');
  return data;
};

// 서버 사이드에서 데이터 가져오기
export async function getServerSideProps() {
  const queryClient = new QueryClient();

  // 서버에서 React Query를 사용해 데이터 미리 패칭
  await queryClient.prefetchQuery('dataQuery', fetchData);

  // 서버에서 받은 데이터를 클라이언트로 전달하기 위해 데이터 준비
  return {
    props: {
      dehydratedState: dehydrate(queryClient), // React Query의 상태를 전달
    },
  };
}

export default function MyPage({ dehydratedState }) {
  // Hydration API를 사용하여 서버에서 전달된 데이터를 클라이언트에서 사용
  const queryClient = new QueryClient();

  // 클라이언트에서 쿼리 데이터를 사용
  const { data, isLoading, error } = useQuery('dataQuery', fetchData);

  return (
    <Hydrate state={dehydratedState}>
      {isLoading ? (
        <div>Loading...</div>
      ) : error ? (
        <div>Error: {error.message}</div>
      ) : (
        <div>
          <h1>Data</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </Hydrate>
  );
}

1. getServerSideProps

Next.js의 getServerSideProps 함수에서 QueryClient를 생성하고, prefetchQuery를 사용해 서버에서 데이터를 미리 가져온다.
dehydrate를 사용하여 React Query의 상태를 직렬화한 뒤 props로 전달한다.

2. prefetchQuery

prefetchQuery는 서버에서 데이터를 미리 패칭하는 데 사용한다.
서버에서 패칭한 데이터를 클라이언트가 받아와서 즉시 사용할 수 있도록 준비한다.(dehydrate)

3. Hydrate

클라이언트에서는 React Query의 Hydrate 컴포넌트를 사용하여, 서버에서 전달된 미리 가져온 데이터(dehydrated state)를 클라이언트에서 재수화한다.(rehydrate) 이렇게 하면 서버에서 이미 가져온 데이터를 React Query 캐시에서 사용할 수 있다.

4. 클라이언트 사이드 쿼리

클라이언트 측에서는 useQuery를 사용하여 데이터를 가져오고, initialData를 설정할 수 있다. 이때 서버에서 전달된 데이터는 React Query 캐시에 바로 사용된다.