[Nextjs] react-query를 이용한 서버 데이터 Prefetch 방법

📒 react-query를 이용한 서버 데이터 Prefetch 방법

Nextjs는 서버사이드 렌더링을 통해 사용자에게 완성된 HTML 페이지를 건네줄 수 있습니다.

그와 더불어 데이터 fetching을 클라이언트가 아닌 서버에서 미리 한 뒤, 그 결과물을 HTML에 포함시킬 수도 있습니다.

이렇게 prefetching이 이루어질 경우 거치는 네트워크 단계가 적어져 더 빠르고, 서버 안에서 호출-응답이 이루어지기 때문에 더 안전하다는 이점을 누릴 수 있습니다.

그럼 Nextjs에서 react-query를 이용한 prefetch 방법을 소개하겠습니다.

📌 QueryProvider 세팅

react query를 사용하기 위해 QueryClientProvider를 위한 클라이언트 사이드 컴포넌트를 만들어준 뒤, layout.tsx에 감아줍니다.

// components/Providers.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

function makeQueryClient() {
  return new QueryClient();
}

let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
  if (typeof window === "undefined") {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

export default function Providers({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

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

// app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div>
          <Providers>{children}</Providers>
        </div>
      </body>
    </html>
  );
}

더 자세한 세팅 방법은 다음 공식 문서를 참고해주세요.

Server Rendering & Hydration | TanStack Query React Docs

This ad helps to keep us from burning out and rage-quitting OSS just *that* much more, so chill. 😉

tanstack.com

📌 호출할 API Query 정리

https://jsonplaceholder.typicode.com/

저는 예제를 위해 위의 mock api를 사용했습니다.

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

type PostType = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export class PostService {
  static async getPost(id: number) {
    const response = await axios
      .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((data) => data);
    return response.data;
  }
  static async getPostList() {
    const response = await axios
      .get<PostType[]>(`https://jsonplaceholder.typicode.com/posts`)
      .then((data) => data);
    return response.data;
  }
}

export class PostQueryOption {
  static getPost(id: number) {
    return { queryKey: ["post", id], queryFn: () => PostService.getPost(id) };
  }
  static getPostList() {
    return { queryKey: ["post"], queryFn: () => PostService.getPostList() };
  }
}

export const usePost = (id: number) => {
  return useQuery(PostQueryOption.getPost(id));
};

export const usePostList = () => {
  return useQuery(PostQueryOption.getPostList());
};

Post를 단일과 리스트로 불러오는 API를 사용했습니다.

어떻게 사용 및 분리해도 상관은 없지만, 저는 한 파일에 공통된 관심사에 대한 API 호출 코드 및 쿼리를 위와 같이 사전 정의해 두고 사용합니다.

📌 Prefetch 공통 코드 분리

import { PostQueryOption } from "./usePost";
import { PostList } from "./PostList";
import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";

export default async function Page() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(PostQueryOption.getPostList());
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <PostList />
    </HydrationBoundary>
  );
}

// PostList.tsx

"use client";

import Link from "next/link";
import { usePostList } from "./usePost";

export const PostList = () => {
  const { data } = usePostList();
  return (
    <div>
      {!!data?.length &&
        data.map((item) => (
          <Link key={item.id} href={`/post/${item.id}`}>
            {item.title}
          </Link>
        ))}
    </div>
  );
};

서버에서 클라이언트 측에 데이터를 보내기 전에 prefetch 하기 위해선 위에서 사용한 3가지 기능에 대해 살펴보겠습니다.

queryClient.prefetchQuery
특정 쿼리 데이터를 미리 서버에서 불러와서 캐시에 저장하는 역할을 합니다.
queryClient.prefetchQuery는 데이터를 미리 가져오는 기능을 제공하는 함수입니다.
HydrationBoundary
HydrationBoundary는 서버에서 가져온 데이터를 클라이언트에서 재사용할 수 있도록 상태를 하이드레이션 하는 컴포넌트입니다.
dehydrate
서버에서 가져온 데이터를 직렬화하여 클라이언트로 전달하고, 클라이언트가 해당 데이터를 하이드레이션 할 수 있도록 도와줍니다.

위 기능들의 동작 방식을 요약하면 다음과 같습니다.

데이터 미리 패칭
queryClient.prefetchQuery를 사용하여 서버에서 게시물 리스트 데이터를 미리 불러와 캐시에 저장합니다.
데이터 직렬화
dehydrate(queryClient)를 통해 서버에서 받아온 데이터를 직렬화하여 클라이언트로 전달할 준비를 합니다.
하이드레이션
클라이언트에서는 HydrationBoundary를 사용하여 서버에서 미리 가져온 데이터를 재사용하여 불필요한 추가 데이터 패칭을 방지합니다.

그러나 위 방식대로 사용한다면 prefetch를 사용하기 위한 중복 코드가 발생하기 때문에 다음과 같은 형태의 컴포넌트로 분리하여 사용합니다.

import {
  dehydrate,
  FetchQueryOptions,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";

type PrefetchBoundaryType = {
  children: React.ReactElement;
  options: FetchQueryOptions;
};

export default async function PrefetchBoundary({
  children,
  options,
}: PrefetchBoundaryType) {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(options);
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      {children}
    </HydrationBoundary>
  );
}

// After

import { PostQueryOption } from "./usePost";
import { PostList } from "./PostList";
import PrefetchBoundary from "./PrefetchBoundary";

export default async function Page() {
  return (
    <PrefetchBoundary options={PostQueryOption.getPostList()}>
      <PostList />
    </PrefetchBoundary>
  );
}

여기서 주의할 점은 prefetch 하는 컴포넌트에 반드시 async 키워드를 추가하여 비동기 데이터 패칭을 수행한 후에 컴포넌트를 렌더링 하도록 합니다.

마무리하며 prefetch를 사용해 로딩 시간을 단축하고, 사용자 경험을 더 나아지게 시도해 보겠습니다.

전체 코드는 깃허브에서 참고 바랍니다!

https://github.com/devlasbe/nextjs-playground/tree/main/app/2-prefetch

nextjs-playground/app/2-prefetch at main · LasBe-code/nextjs-playground

Nextjs 호기심 천국. Contribute to LasBe-code/nextjs-playground development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

'React > Nextjs' 카테고리의 다른 글

[NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 (0)	2024.11.22
[NextJS, SEO] AppRouter Dynamic Metadata 생성하기 (0)	2024.11.21
Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 (0)	2024.10.10
[Nextjs] searchParams로 URL 쿼리 스트링 파싱하기 (0)	2024.09.09
[Nextjs] Dynamic Route, 동적 라우팅 (0)	2024.08.03