[Next.js] Tanstack Query로 SSR ???

 

들어가면서

코드를 설명하기 전  SSR(Server-Side Rendering)이 중요한 이유를 알아야 한다

리액트는 CSR방식을 채택함으로써 웹을 앱처럼 별도의 새로고침 과정이 없이 데이터를 동적으로 핸들링할 수 있게 하여 사용자는 깜빡이는 현상을 느끼지 않고 웹을 경험할 수 있게 만들었다

하지만 시간이 지날수록 다시 SEO가 중요해졌고 CSR은 페이지에서 보이는 데이터의 양이 많을수록 느리다는 단점이 있어 이를 보완하고자 나온 게 Next.js라고 할 수 있다

리액트로 개발을 즐겨했던 개발자라면 대부분 알고 있는 리액트와 리액트 쿼리(구)를 사용 했을텐데 Next.js에서 리액트 쿼리를 쓸 필요가 있나 하는 의견들도 간혹 있었지만 현재 Tanstack Query (구) react-query는 Next.js에서도 안되는거 없이 다된다는 Tanstack Query의 자신감과 함께 SSR을 사용할 수 있게 소개하고 있다

이를 통해 조금이나마 우리가 Next.js에서도 하는 리액트식 개발을 벗어날 수 있지 않을까 해서 공유 해본다

이제 'use client'선언은 제발 필요한 부분에서만 하고 SEO위해 SSR에게 양보하자!

이제 SEO에 친화적인 프로젝트로 만들어보자 생각보다 간단하다
Tanstack query에서 SSR을 구현하는 단계는 아래와 같다 

✅ 서버에서 실행되는 단계

1. 사용자가 /ssr-page를 요청하면 Next.js의 getServerSideProps가 실행됨
2. QueryClient를 생성하고 prefetchQuery를 실행하여 데이터를 가져옴
3. 데이터를 직렬화(dehydrate(queryClient))하여 props로 전달

✅ 클라이언트에서 실행되는 단계

1. HydrationBoundary가 서버에서 받은 데이터를 React Query의 캐시로 복구
2. useQuery가 실행될 때, 서버에서 받은 데이터를 바로 사용하여 불필요한 API 요청을 방지
3. 이후 클라이언트에서 같은 데이터를 요청하면 React Query 캐시에서 데이터를 가져옴

 

Tanstack query를 설치하였다는 가정하에 그 이후 단계를 설명한다 만약 아직 설치를 하지 않았다면 공식문서를 통해 설치부터 하고 오면 된다
주의 : 최신버전을 권장한다 이유는 v5와 v4의 문법이 달라진 부분이 있다

 

설치

https://tanstack.com/query/latest/docs/framework/react/installation

Installation | TanStack Query React Docs

예시 코드

1️⃣ app/ssr-page/page.tsx (SSR 적용)

import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
import PostList from "./post-list";
import { fetchPosts } from "./fetchPosts";

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

  // ✅ 서버에서 미리 데이터 가져오기 (SSR)
  await queryClient.prefetchQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
  });

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

2️⃣ app/ssr-page/post-list.tsx (클라이언트에서 데이터 사용)

"use client";

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

const usePosts = () => {
  return useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
  });
};

export default function PostList() {
  const { data, isLoading } = usePosts();

  if (isLoading) return <p>Loading...</p>;

  return (
    <ul>
      {data.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

 

정리

📌 SEO 최적화 (검색엔진에 유리)

- 서버에서 미리 데이터를 가져와 HTML을 생성하므로, Google, Bing과 같은 검색 엔진이 전체 페이지를 읽을 수 있다

 

📌 성능 최적화 (빠른 페이지 로딩)

- 서버에서 데이터를 미리 가져와 렌더링 하기 때문에, 브라우저에서 API 요청을 다시 하지도 된다

 

📌 이후 Tanstac Query의 캐싱을  활용

- 캐싱이 적용되면 같은 데이터에 대해 클라이언트에서 다시 요청할 필요 없음 → 불필요한 네트워크 비용을 절감할 수 있다

 

📌 사용자 경험 (UX) 향상

- 이후 클라이언트에서 데이터를 다시 요청할 때, React Query 캐시를 활용하여 부드러운 UX 제공

 

마치면서

Next.js와 Tanstack Query를 통해 SSR과 함께 사용하면 성능과 SEO, UX를 모두 개선할 수 있다는 장점이 있다.