Next.js App Router 실전 패턴과 안티패턴

App Router 핵심 개념

Next.js App Router는 React Server Components를 기반으로 합니다. 서버에서 렌더링되는 컴포넌트와 클라이언트에서 실행되는 컴포넌트를 명확히 구분해야 합니다.

패턴 1: 서버 컴포넌트에서 데이터 페칭

서버 컴포넌트에서 직접 DB나 API를 호출하세요. 별도의 API 라우트를 만들 필요가 없습니다.

// page.tsx (Server Component)
async function Page() {
  const posts = await prisma.post.findMany()
  return <PostList posts={posts} />
}

패턴 2: 클라이언트 컴포넌트 최소화

'use client'는 정말 필요한 곳에만 사용하세요. 이벤트 핸들러, useState, useEffect가 필요한 컴포넌트만 클라이언트 컴포넌트로 만듭니다.

안티패턴: 과도한 API 라우트

서버 컴포넌트에서 직접 데이터를 가져올 수 있는데 불필요하게 API 라우트를 만들고 fetch하는 것은 안티패턴입니다.

안티패턴: 전체 페이지를 use client로

페이지 전체를 클라이언트 컴포넌트로 만들면 SSR의 장점을 잃습니다. 인터랙티브한 부분만 분리하세요.