[프로젝트] react-query

react-query 세팅

yarn add @tanstack/react-query

최상단 컴포넌트를 QueryClientProvider 로 감싸줘야 하는데 현재 나는 Next.js 환경에서 세팅 중

_app.ts 에 관련 세팅을 진행

Hydrate은 아래에서 설명할 예정

_app.ts

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

react-query란?

데이터 상태 관리 라이브러리로서, React 기반의 프론트엔드 애플리케이션에서 비동기 데이터 요청과 상태 관리를 용이하게 해주는 라이브러리
서버 사이드 렌더링(SSR)과 함께 잘 작동하여 SEO에 유리한 애플리케이션을 구축하는 데 도움이 됨

react-query 장점

• 캐싱
• get을 한 데이터에 대해 update가 되면 자동으로 get 수행
• 데이터 오래되었다고 판단 시 다시 get 수행(invalidateQueries)
• 무한 스크롤
• 선언적으로 비동기 과정을 관리

react-query, @tanstack/react-query 차이

최신 버전을 설치하고 싶으면 @tanstack/react-query 설치
v4로 업데이트된 react-query라 생각하면 됨

Hydrate

SSR은 느린 페이지 전환과 서버 부하가 많다는 문제가 있음.
앞전에 말한 CSR의 한계와 SSR 한계점들을 개선하기 위해 SSR with Hydration 등장

SSR with Hydration

SSR과 CSR을 조합한 SSR with Hydration 방식은 초기 렌더링을 서버에서 수행하고, 클라이언트 측에서도 초기 상태와 이벤트 핸들러 등을 복원하여 애플리케이션을 더욱 향상된 사용자 경험을 제공하는 방식

SSR with Hydration은 사용자가 초기에 빠르게 페이지를 보고, JavaScript가 로드되는 시간 동안 빈 페이지를 기다리지 않고 인터랙티브하게 애플리케이션을 사용할 수 있게 해줌

첫 페이지는 SSR 방식으로 하고 이후 페이지 이동시엔 CSR로 이뤄짐
SSR로 첫 페이지를 보여주고, 이후에는 CSR로 페이지를 더 빠르게 전환하고 상태를 유지하여 사용자가 더욱 빠르고 부드러운 웹 페이지 이용 가능

React Query를 이용해 SSR을 구현하는 방식 2가지

InitialData
:SSR 메서드로 불러온 응답을 React Query 기본값으로 넣어주는 방법

Hydration
: SSR 내에서 prefetch를 통해 쿼리를 불러온 뒤, queryClient에서 dehydrate한 상태값으로 페이지에 전달

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

🫠

출처: https://velog.io/@pjh1011409/React-Query-HydrationSSR