리액트 쿼리를 활용한 SSR으로 데이터 조회하기

안녕하세요!

제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 SSR을 적용하려고 하고 있습니다. 아래 코드는 fetchAPISever 함수를 통해 백엔드 api로부터 데이터를 요청하는 함수입니다. 이때fetchAPIsever 함수는 next/header의 cookies()를 통해 사용자의 토큰이 있으면 토큰을 넣어서 api를 요청하는 함수입니다.

export const getBestAndPendingReviews =
  async (): Promise<ReviewePageResponse> => {
    const res = await fetchAPIServer('/api/review', 'GET');
    if (res.code === 'SUCCESS') {
      return res.result;
    }
    throw new Error(
      `리뷰 페이지 데이터 불러오기 실패 ${res.code}-${res.message}`,
    );
  };

아래 코드는 리뷰 페이지에서 서버 사이드 렌더링으로 보여주기 위해 리액트 쿼리로 Hydration을 적용한 코드입니다.

// src\app\reviews\page.tsx
import {
  HydrationBoundary,
  QueryClient,
  dehydrate,
} from '@tanstack/react-query';
import ReviewDashboard from './_components/ReviewDashboard';
import { getBestAndPendingReviews } from './_lib/getBestAndPendingReviews';

export default async function ReviewsPage() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['reviews', 'best'],
    queryFn: getBestAndPendingReviews,
  });
  const dehydrateState = dehydrate(queryClient);
  return (
    <HydrationBoundary state={dehydrateState}>
      <ReviewDashboard />
    </HydrationBoundary>
  );
} '

<ReviewDashboard/> 컴포넌트에서 UserInfo 컴포넌트를 반환하도록 설정하고 useQuery 훅을 사용하려 했으나, fetchAPIServer 함수에서 next/headers 를 import하고 있어서 클라이언트 컴포넌트에서 사용할 수 없다는 에러가 발생했습니다. 그러면 SSR을 적용하기 위해서는 getQueryData를 사용해야하는 걸까요..?

import { QueryClient } from '@tanstack/react-query';
import { ReviewePageResponse } from '../_lib/getBestAndPendingReviews';

export default function UserInfo() {
  const queryClient = new QueryClient();
  const reviews = queryClient.getQueryData<ReviewePageResponse>([
    'reviews',
    'best',
  ]);

  const { total } = reviews!;
  if (!reviews) return <p>리뷰가 없습니다.</p>;

  console.log('reviews', reviews);
  return <p>작성한 리뷰 {total || 0}</p>;
} 

  또는 useQuery를 쓰되 쿼리 함수를 Promise.Resolve()로 서버에서 전달 받은 데이터를 받는게 나은가 요?

'use client';

import { useQuery } from '@tanstack/react-query';

export default function UserInfo() {
  const { data: reviews, isLoading } = useQuery({
    queryKey: ['reviews', 'best'],
    queryFn: () => Promise.resolve(), // 서버 데이터 재활용
  });

  if (isLoading) return <p>Loading...</p>;
  if (!reviews) return <p>리뷰가 없습니다.</p>;
  const { total } = reviews!;

  console.log('reviews', reviews);
  return <p>작성한 리뷰 {total || 0}</p>;
}