이 가이드는 Next.js에서의 데이터 페칭 및 캐싱의 기본 사항을 실용적인 예제와 best practice를 제공하며 안내합니다.

다음은 Next.js에서 데이터 페칭의 기본 예제입니다:

// app/page.tsx
export default async function Page() {
  const data = await fetch('<https://api.vercel.app/blog>')
  const posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

이 예제는 비동기 React 서버 컴포넌트에서 fetch API를 사용한 기본적인 서버 사이드 데이터 페칭을 보여줍니다.

참고 자료

• fetch
• React cache
• Next.js unstable_cache

예제

서버에서 fetch API를 사용하여 데이터 가져오기

이 컴포넌트는 블로그 게시물 목록을 가져와서 표시합니다. fetch의 응답은 기본적으로 캐시되지 않습니다.

// app/page.tsx
export default async function Page() {
  const data = await fetch('<https://api.vercel.app/blog>')
  const posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

이 경로에서 다른 Dynamic APIs를 사용하지 않는다면, next 빌드 중에 정적 페이지로 사전 렌더링됩니다. 그 후 Incremental Static Regeneration을 사용하여 데이터를 업데이트할 수 있습니다.

페이지의 사전 렌더링을 방지하려면 파일에 다음을 추가할 수 있습니다:

export const dynamic = 'force-dynamic'

그러나 일반적으로 쿠키, 헤더 사용 또는 페이지 프롭에서 들어오는 searchParams를 읽는 함수들을 사용하여 페이지를 자동으로 동적으로 렌더링하게 만듭니다. 이 경우에는 force-dynamic을 명시적으로 사용할 필요가 없습니다.

ORM 또는 데이터베이스를 사용하여 서버에서 데이터 가져오기

이 컴포넌트는 블로그 게시물 목록을 가져와서 표시합니다. 데이터베이스의 응답은 기본적으로 캐시되지 않지만 추가 설정을 통해 캐시할 수 있습니다.

app/page.tsx