[Next.js][react-query] API Routes 사용시 무한 request 발생 이슈

Next.js의 API Routes

대부분 프로젝트 진행 시, 백엔드 API 개발보다 프론트엔드 개발이 더 빨리 되는 경우가 많다.

API 개발 완료 전 테스트할 수 있는 mockAPI가 필요하다.

 

Next.js의 API Routes 기능을 이용해 간단한 mockAPI를 구현할 수 있다.

 

pages/api 폴더 내부에 있는 파일들은 모두 /api/* 로 요청할 수 있다.

 

// api/reviews/[reviewId]

import { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "GET") {
    const { reviewId } = req.query;
    const review = reviewListMockData.find(({ id }) => +reviewId === id);

    res.status(200).json(review);
  }
}

 

React-Query 설정

프로젝트에서 react-query를 사용할 것이기 때문에 mockAPI도 react-query로 작성하였다.

 

_app.tsx에서 react-query 관련 설정을 해준다.

import type { AppProps } from "next/app";
import {
  QueryClient,
  QueryClientProvider,
  Hydrate,
} from "@tanstack/react-query";

export default function App({ Component, pageProps }: AppProps) {
  const [queryClient] = new QueryClient({
    defaultOptions: { queries: { suspense: true } },
  });

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />;
      </Hydrate>
    </QueryClientProvider>
  );
}

 

_app.tsx에서 위와 같이 설정할 경우, 무한 request 요청이 발생한다.

Next.js는 URL이 변경될 때마다 App 컴포넌트를 재렌더링한다. App 컴포넌트가 재렌더링될 때마다 내부에 있는 new QueryClient가 계속 재생성되기 때문에 무한 request 요청이 발생한다.

 

Next.js SSR을 사용하고 있기 때문에 App 컴포넌트 외부에서 client를 생성할 수 없다.

따라서 useState를 사용하여 해결할 수 있다.

이렇게 하면 다른 사용자와 요청 간의 데이터를 공유하지 않고, QueryClient가 딱 한번만 만들어진다.

import { useState } from "react";

export default function App({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: { queries: { suspense: true } },
      })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />;
      </Hydrate>
    </QueryClientProvider>
  );
}

 

관련 내용은 react query 공식 문서에도 나와있다

https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration

SSR | TanStack Query Docs

React Query는 Next.js의 서버에서 여러 쿼리를 미리 가져온 다음 해당 쿼리를 queryClient로 dehydrate하는 것을 지원한다. 

서버가 페이지 로드 시, 즉시 사용할 수 있는 마크업을 먼저 렌더링하고 JS를 사용할 수 있는 즉시 React Query가 해당 쿼리를 업데이트 하거나 hydrate할 수 있다.