logo

[NextJS] fetch

Next.js에서 데이터를 가져오는 방법에는 네 가지가 있습니다.

  • 서버에서 fetch
  • 서버에서 서드파티 라이브러리 사용
  • 클라이언트에서 경로 핸들러를 통해
  • 클라이언트에서 서드파티 라이브러리 사용
 

fetch

Next.js는 기본 fetch웹 API를 확장합니다. 서버의 각 가져오기 요청에 대한 캐싱 및 재검증 동작을 구성할 수 있습니다. React는 React 컴포넌트 트리를 렌더링하는 동안 fetch 요청을 자동으로 메모하도록 확장됩니다.

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function Page() {
  const data = await getData()

  return <main></main>
}

Next.js는 fetch가 반환한 값을 서버의 데이터 캐시에 자동으로 캐시합니다. 이는 빌드 시 또는 요청 시 데이터를 가져오고, 캐시하고, 각 데이터 요청에서 재사용할 수 있음을 의미합니다.

 

재검증

캐시된 데이터는 시간 기반과 주문형, 두 가지 방법으로 재검증됩니다. 재검증은 새로운 데이터를 다시 가져오는 것을 의미합니다.

먼저, 시간 기반 재검증을 하려면 다음과 같이 fetch 함수 호출에 revalidate 옵션을 추가합니다. 아래 코드는 캐시의 유효 시간을 3600초(=1시간)로 설정합니다. 마지막으로 호출 이후 1시간이 지나면, 다음 요청에서 데이터를 다시 가져옵니다.

fetch('https://...', { next: { revalidate: 3600 } })

특정 route segment에서 모든 fetch에 대해 재검증 시간을 설정하려면 다음과 같이 상수 revalidate를 설정합니다.

export const revalidate = 3600

다음으로 주문형 재검증을 하려면 캐시 태그를 사용합니다. fetch를 할 때, 다음과 같이 태그를 붙입니다.

export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['collection'] } })
  const data = await res.json()
  // ...
}

그리고 재검증을 하려면 서버 액션에서 revalidateTag 함수를 호출합니다.

'use server'

import { revalidateTag } from 'next/cache'

export default async function action() {
  revalidateTag('collection')
}
Previous
NextJS