리액트 쿼리 SSR 예시

리액트 쿼리 prefetch

next.js에서 리액트 쿼리를 사용할 때 SSR에서 API요청을 prefetch하여 전달할 수 있습니다.

예시

서버 컴포넌트 코드를 아래와 같이 작성하고 HydrationBoundary로 쿼리를 사용할 컴포넌트를 감싸줍니다.

// Home/page.tsx
import {
  HydrationBoundary,
  QueryClient,
  dehydrate,
} from "@tanstack/react-query";
import getHi from "./_api/getHi";
import SayHi from "./_component/SayHi";

const Home = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({ queryKey: ["hi"], queryFn: getHi });
  const dehydrateState = dehydrate(queryClient);

  return (
    <section>
      <h1>메인 페이지</h1>
      <HydrationBoundary state={dehydrateState}>
        <SayHi />
      </HydrationBoundary>
    </section>
  );
};

export default Home;

컴포넌트에서 아래와 같이 useQuery를 사용해주면 됩니다.

// SayHi.tsx
"use client";

import { useQuery } from "@tanstack/react-query";
import getHi from "../_api/getHi";

const SayHi = () => {
  const { data } = useQuery({
    queryKey: ["hi"],
    queryFn: getHi,
  });

  return <p>{data}</p>;
};

export default SayHi;