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

안녕하세요 강의를 듣는중 추가적으로 tanstack-query를 공부하다가 혼자서 도저히 이해를 할수 없는 부분이 있어서 이 부분에 대해 혹시 조언을 받을수 있을까 싶어 문의드립니다. prefetchQuery가 개인적으로 잘 이해가 안되어서 별도로 프로젝트를 생성하여 기본적인 것부터 다시 공부하고 있었습니다만, tanstack-query 공식사이트에서 권장하던 방법대로 임의적으로 코드를 생성하였더니 router.push()로 다른 페이지에 갔다가(->홈으로[/]) 다시 돌아오는것(->Post페이지(/post))을 반복하다보면 가끔 서버 컴포넌트에 있는 prefetchQuery안의 fetch와 클라이언트 컴포넌트에 있는 useQuery의 fetch가 동시에 실행이 되는 일이 가끔 발생을 해서요. fetch가 이중으로 실행이 되고 있는것 같은데 아무리 코드를 살펴봐도 제가 잘못한 부분을 찾을수가 없어서 조언을 구합니다ㅠ

page.tsx

import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import Post from './_component/Post';
import getPostRecommends from './_hook/fetch';

export default async function tanstackQuery() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['movies'],
    queryFn: getPostRecommends,
  });

  const dehydratedState = dehydrate(queryClient);

  return (
    <HydrationBoundary state={dehydratedState}>
      <Post />
    </HydrationBoundary>
  );
}

post.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import getPostRecommends from '../_hook/fetch';
import { useRouter } from 'next/navigation';

export default function TanstackQuery() {
  const { data } = useQuery({
    queryKey: ['movies'],
    queryFn: getPostRecommends,
  });
  const router = useRouter();

  type PostItem = {
    id: number;
    title: string;
  };

  return (
    <div>
      <button onClick={() => router.push('/')}>홈으로</button>
      {data?.map((item: PostItem) => {
        return (
          <div key={item.id}>
            <h2>{item.title}</h2>
          </div>
        );
      })}
      {data?.message}
    </div>
  );
}

getPostRecommends

export default async function getPostRecommends() {
  if (typeof window === 'undefined') {
    console.log('서버에서 fetch 실행' + new Date());
  } else {
    console.log('클라이언트에서 fetch 실행' + new Date());
  }

  const response = await fetch('https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10', {
    cache: 'no-store',
  });

  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }

  const res = await response.json();

  return res;
}

기본 provider 설정

'use client';

import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactNode } from 'react';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 6 * 1000,
      },
    },
  });
}

type Props = { children: ReactNode };

let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

export default function Providers({ children }: Props) {
  const queryClient = getQueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

서버 콘솔

브라우저 콘솔

위에 캡쳐화면 같이 fetch가 거의 동시간에 발생을 하고 있는 모습입니다. next.js router cache 때문에 30초마다 서버 컴포넌트쪽이 리랜더링 되어서 페이지를 새로고침을 하지 않고 router.push로 다시 페이지에 들어가도 서버 컴포넌트쪽이 다시 실행된다는건 이해를 했는데, 그렇다면 초기 랜더링할때와 똑같이 데이터가 prefetch되어서 클라이언트쪽 useQuery가 실행이 되지 않아야하지 않나요? 왜 두번이나 fetch가 도는건지 아무리 자료를 찾아봐도 잘 모르겠어서 결국 문의드리게 되었습니다ㅠ