NextJs에서 react-query SSR 대응하기

yo_onms·2023년 9월 5일

NextJs

목록 보기

3/6

react-query는 react를 사용하는 사람이라면 한번쯤은 들어본 라이브러리이다.

개인적으로 장점은 크게 2가지라 생각하는데
1. 데이터 캐싱을 손쉽게 할수있다. (캐싱 방법이나 등은 설명하지 않겠습니다.)
2. 페이징처리, 지연 로딩 데이터와 같은 성능 최적화해주며 로딩 상태 등과 같은 기능을 제공을 해준다.

위와 같은 이유로 NextJs + react-query를 많이 사용하는거 같다.

NextJs를 사용하는 가장 큰 이유 중 하나는 SSR이라고 생각하는데 react-query는 아쉽게도 CSR로 데이터를 가져온다.

그래서 react-query의 데이터를 SSR에서 사용할수 있는 대표적인 2가지 방법을 알아볼려고한다.

1. Initial Data

개인적으로 가장 직관적인 방법이라고 생각한다.
프로젝트에 SSR이 적은경우 자주 사용하는거 같다.

// apis.ts
export const getProducts = () => axios.get('https://api.test.com/products');

// pages/product.tsx

const Product = (props) => {
  const { data } = useQuery('feeds', getProducts, { initialData: props.products });
  ...
}

export async function getServerSideProps() {
  const products = await getProducts();
  return { props: { products } };
}

위와 같은 방식으로 많이 쓰는거 같다.
간략하게 설명 하자면 getServerSideProps에서 getProducts를 통해 product 데이터를 받아오고 받아온 데이터를 useQuery가 선언되어있는곳에 props로 넘겨 initialData: product 이런식으로 적용을 하면 된다.

이해가 안된다면 아래 링크로 들어가서 추가적으로 보세요!
https://tanstack.com/query/v4/docs/react/guides/initial-query-data

2. Hydration

프로젝트에 SSR이 많이 사용이 되면 적용하는거 같다.
개인적으로는 3개 이상의 SSR대응이 필요하면 적용하는거 같다.
한번 초기설정 적용후에는 편하게 사용이 가능하다.

  
// pages/_app.tsx
function MyApp({ Component, pageProps }) {
  const [client] = useState(() => new QueryClient());
  
  return (
    <QueryClientProvider client={client}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>
     </QueryClientProvider>
  );
};

// apis.ts
export const getProducts = () => axios.get('https://api.test.com/products');
  
// pages/product.tsx
const Product = (props) => {
  const { data } = useQuery('feeds', getProducts);
  ...
}

export async function getServerSideProps() {
  const queryClient = new QueryClient();
  const products = await queryClient.fetchQuery('feeds', getProducts);
  
  return {
     props: {
       dehydratedState: dehydrate(queryClient),
     },
   }
 }