Data Fetching Patterns

Next.js App Router에서의 데이터 페칭 패턴과 캐싱 전략을 학습합니다.

📡 Server Components에서의 Data Fetching

Server Components에서는 async/await를 직접 사용하여 데이터를 페칭할 수 있습니다.

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // 60초마다 재검증
  });
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();
  return <PostsList posts={posts} />;
}

🔧 fetch API 옵션 설정

Cache 옵션:

캐시를 사용하여 빠른 응답

Revalidate (초):

60 초마다 캐시를 재검증합니다

fetch('url', {
  cache: 'force-cache',
  next: { 
    revalidate: 60
  }
})

⚙️ 캐싱 전략

force-cache (기본값)

• 캐시를 최대한 활용
• 빠른 응답 시간
• 정적 콘텐츠에 적합

revalidate

• ISR (Incremental Static Regeneration)
• 주기적으로 캐시 갱신
• 블로그, 뉴스 등에 적합

no-store

• 캐시 사용 안 함
• 항상 최신 데이터
• 실시간 데이터에 적합

🔄 데이터 페칭 패턴 비교

패턴	설명	사용 시나리오	코드 예제
Sequential	순차적으로 데이터 페칭	의존 관계가 있는 데이터	await A; await B;
Parallel	병렬로 데이터 페칭	독립적인 여러 데이터	Promise.all([A, B])
Streaming	Suspense로 점진적 로딩	느린 데이터 분리	<Suspense>

📝 Sequential Fetching

async function Page() {
  // user가 필요
  const user = await getUser();
  
  // user.id가 필요
  const posts = await getPosts(user.id);
  
  return <UserPosts user={user} posts={posts} />;
}

⚠️ 총 시간 = A + B (느림)
✓ 데이터 간 의존성이 있을 때 사용

⚡ Parallel Fetching

async function Page() {
  // 병렬로 실행
  const [user, posts, comments] = await Promise.all([
    getUser(),
    getPosts(),
    getComments()
  ]);
  
  return <Dashboard {...data} />;
}

✓ 총 시간 = max(A, B, C) (빠름)
✓ 독립적인 데이터일 때 사용

🎯 Request Memoization (자동 중복 제거)

Next.js는 같은 URL과 옵션을 가진 fetch 요청을 자동으로 중복 제거합니다.

❌ 중복 요청

// Header.tsx
const user = await getUser();

// Sidebar.tsx
const user = await getUser();

// 2번 요청됨 (일반적인 경우)

✅ 자동 최적화

// Header.tsx
const user = await getUser();

// Sidebar.tsx
const user = await getUser();

// 1번만 요청됨 (Next.js)

✅ Best Practices

• Server Component에서 직접 페칭
• 가능한 경우 병렬 페칭 사용
• 적절한 캐싱 전략 선택
• Suspense로 느린 데이터 분리
• revalidate로 ISR 활용

⚠️ 주의사항

• Client Component에서는 fetch 사용 자제
• 민감한 데이터는 Server에서만 처리
• 과도한 캐싱은 오래된 데이터 위험
• no-store는 성능 저하 가능
• API 키는 환경 변수로 관리