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

안녕하세요 !
Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다.

Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다.

1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다.

2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다.

현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다.

이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다.

제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ?

또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ?

// 서버 컴포넌트

import {
  HydrationBoundary,
  dehydrate,
  QueryClient,
} from "@tanstack/react-query";
import { QUERY_KEY } from "@/constants";
import { requestGetPushAlarmList } from "@/apis/notification";
import NotificationClient from "./Client";

export default async function Page() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: [QUERY_KEY.PUSH_LIST],
    queryFn: () => requestGetPushAlarmList({}),
  });

// const { rows: pushList } = queryClient.getQueryData([
    // QUERY_KEY.PUSH_LIST,
  // ]) as unknown as Rows<PushAlarm>; 예시 2. getQueryData로 데이터에 접근

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
        <NotificationClient />
    </HydrationBoundary>

    // <NotificationList pushList={pushList} /> 예시2. props로 직접 데이터 전달
  );
}

// 하위 컴포넌트

"use client";

import { useQuery } from "@tanstack/react-query";
import { requestGetPushAlarmList } from "@/apis/notification";
import { QUERY_KEY } from "@/constants";
import NotificationList from "./_components/NotificationList";
import ScreenBox from "@/components/ui/ScreenBox";
import Empty from "@/components/ui/Empty";

export default function NotificationClient() {
  const { data } = useQuery({
    queryKey: [QUERY_KEY.PUSH_LIST],
    queryFn: () => requestGetPushAlarmList({}),
    select: (data) => data.rows,
  });

  return (
    <>
      {!data?.length ? (
        <ScreenBox.CenterBody>
          <Empty message="알림이 없습니다." />
        </ScreenBox.CenterBody>
      ) : (
        <NotificationList pushList={data} />
      )}
    </>
  );
}