📡 Next.js App Router 데이터 패칭 완벽 가이드

📡 Next.js App Router 데이터 패칭 완벽 가이드

Next.js App Router는 서버/클라이언트에서 데이터를 유연하게 패칭할 수 있도록 다양한 방식을 제공합니다. 이 글에서는 서버 컴포넌트 기반 fetch, 클라이언트 상태 기반 요청, 그리고 로딩 관리까지 전반적인 사용법을 정리합니다.

---

✅ 서버 컴포넌트에서의 데이터 패칭

Next.js App Router에서는 페이지와 레이아웃이 기본적으로 서버 컴포넌트입니다. 서버에서 직접 데이터를 가져오는 것이 기본 구조입니다.

🔹 fetch 사용 예시

// app/posts/page.tsx
export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'no-store', // 또는 next: { revalidate: 60 }
  });
  const posts = await res.json();

  return (


{posts.map((post) => (-   {post.title}
))}

  );
}

• cache: 'no-store': 매 요청마다 새로 가져옴
• next: { revalidate: 60 }: 60초 간 캐시된 데이터 사용 (ISR)

---

✅ 클라이언트 컴포넌트에서의 데이터 패칭

클라이언트 컴포넌트('use client')는 useEffect, fetch, SWR 등으로 데이터를 가져옵니다.

🔹 클라이언트 fetch + useEffect

'use client';
import { useEffect, useState } from 'react';

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

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

  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

---

🔹 SWR 사용 (비동기 캐싱 라이브러리)

'use client';
import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

export default function Profile() {
  const { data, error, isLoading } = useSWR('/api/profile', fetcher);

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생</div>;

  return <h1>{data.name}</h1>;
}

• 자동 캐싱 및 재검증 지원
• 전역 상태 공유 가능

---

✅ 데이터 로딩 UX 개선

App Router는 로딩 상태 전용 컴포넌트와 Suspense를 함께 사용해 데이터 로딩 시 UX를 개선할 수 있습니다.

🔹 loading.tsx 사용

// app/posts/loading.tsx
export default function Loading() {
  return <p>게시글 불러오는 중...</p>;
}

해당 디렉토리의 page.tsx가 로딩될 때 자동으로 표시됩니다.

---

🔹 Suspense로 비동기 컴포넌트 감싸기

반응형

// app/posts/page.tsx
import { Suspense } from 'react';
import PostList from './PostList';

export default function Page() {
  return (
    <Suspense fallback={<p>불러오는 중...</p>}>
      <PostList />
    </Suspense>
  );
}

PostList가 async 컴포넌트라면 Suspense로 감싸는 것이 권장됩니다.

---

✅ 실무 패턴 요약

패칭 위치 사용 방식 권장 상황

서버 컴포넌트	fetch, DB 쿼리	보안 데이터, 초기 페이지 렌더링
클라이언트 컴포넌트	useEffect + fetch	사용자 상호작용, 비동기 UI
클라이언트 컴포넌트	SWR / React Query	캐싱, 전역 공유, 자동 갱신
서버 컴포넌트	revalidate 옵션	주기적 ISR 사용 시

---

✅ 결론

• 서버 컴포넌트 = 안전하고 빠른 초기 데이터 렌더링
• 클라이언트 컴포넌트 = 사용자 상호작용 중심 처리
• SWR = 클라이언트 캐싱 최적화
• loading.tsx + Suspense = 부드러운 UX 제공

Next.js App Router는 데이터 패칭 구조가 매우 유연합니다. 서버 기반으로 기본 동작하되, 클라이언트 전환도 쉬우므로 상황에 맞춰 조합하는 것이 중요합니다.

---

 

Next.js, App Router, 데이터 패칭, 서버 컴포넌트, 클라이언트 컴포넌트, fetch, SWR, React Query, Suspense, UX 최적화