인프런 커뮤니티 질문&답변

안녕하세요!

제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 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>;
}