[Next.js] 서버 vs 클라이언트 데이터 패칭에 대해 알아보기

서버 vs 클라이언트 언제 fetch vs React Query?

Next.js를 사용하다 보면 항상 헷갈린다. 이거 서버에서 가져와야 돼?
아니면 React Query 써야 돼? 정리하면서 알아보자.

왜 서버와 클라이언트에서 API 호출을 나눌까?

• 어디에서 실행되는가
• 언제 실행되는가
• 무엇을 보호해야 하는가

서버 컴포넌트에서 API 호출

특징

• 서버(Node.js)에서 실행
• 렌더링 시점에 데이터 가져옴 (빠르게 가져올 수 있음)
• HTML에 데이터를 포함해서 내려줌 (SEO 최적화에 도움)

async function Page() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return <div>{posts.map(p => p.title)}</div>;
}

---

장점

1. 보안

• API Key, DB 정보 노출되지 않음

2. SEO

• 데이터 포함된 HTML 전달 → 검색엔진 최적화

3. 성능

• 초기 로딩 빠름 (클라이언트 추가 요청 없음,미리 서버에서 불러오기 때문)

4. 캐싱

• Next.js fetch는 기본적으로 캐싱됨
• cache / revalidate 옵션으로 제어 가능

단점

• 인터랙션 불가
• 요청마다 서버 실행 (SSR 기준)

3. 클라이언트 컴포넌트에서 API 호출

특징

• 브라우저에서 실행
• 렌더링 이후 API 호출

• 주로 사용자 인터렉션에 사용

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("/api/posts")
      .then(res => res.json())
      .then(setPosts);
  }, []);

  return <div>{posts.map(p => p.title)}</div>;
}

장점

1. 인터랙션 가능

• 클릭, 검색, 필터링 등 사용자의 인터렉션에 의해 호출될 수 있음.

2. 실시간 데이터 처리

• 사용자 행동 기반 업데이트

3. UX 향상

• 부분 렌더링 가능

---

단점

• SEO에 불리함.(서버에서 불러오는 것이 아니라서)
• API 요청 노출 (보안 취약)
• 초기 로딩 느림

핵심 차이

구분	서버 컴포넌트	클라이언트 컴포넌트
실행 위치	서버	브라우저
실행 시점	렌더링 시	렌더 후
SEO	좋음	나쁨
보안	안전	취약
인터랙션	불가능	가능
초기 로딩	빠름	느림

---

언제 서버에서 가져와야 할까?

• SEO가 중요한 경우
• 초기 렌더링에 데이터가 반드시 필요한 경우
• 보안이 중요한 데이터

언제 클라이언트에서 가져와야 할까?

• 사용자 액션 이후 데이터 변경
• 실시간 데이터
• 인터랙션이 필요한 경우

7. 클라이언트 데이터 관리 - React Query

React Query는 서버 상태를 관리하는 라이브러리다.

"use client";

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

const { data, isLoading } = useQuery({
  queryKey: ["posts"],
  queryFn: fetchPosts,
});

---

✅ React Query 장점

• 캐싱
• 자동 refetch
• loading / error 상태 관리
• 서버 데이터를 상태처럼 관리

---

내가 생각하는 베스트 패턴

초기 데이터는 서버 컴포넌트에서 가져와 SEO와 초기 렌더링을 확보하고,
사용자 인터랙션이나 데이터 변경이 필요한 경우 클라이언트에서 React Query로 관리하기?

// 서버 컴포넌트
const posts = await fetchPosts();

return <PostList initialData={posts} />;

"use client";

// 클라이언트 컴포넌트
const { data } = useQuery({
  queryKey: ["posts"],
  queryFn: fetchPosts,
  initialData: posts,
});

---

장점

• SEO 확보
• 빠른 초기 렌더링
• 인터랙션 가능
• 캐싱 및 상태 관리

---

React Query는 언제 써야 할까?

사용하면 좋은 경우

• 데이터가 자주 바뀜
• 사용자 액션으로 변경됨
• 캐싱 필요 (queryKey를 이용하여 캐싱)
• refetch 필요

---

필요 없는 경우

• 정적인 페이지
• 단순 조회

정리

서버 컴포넌트는 초기 데이터와 SEO, 보안을 위해 사용하고
클라이언트 컴포넌트는 인터랙션과 상태 관리를 위해 사용한다.

맞는지는 잘 모르겟다ㅏ..