업무 수행 중 fetch API 관련 미흡한 점이 있어 번역하고 요약하기 위해 작성했다.

Next.JS 공식문서 중 App Directory의 fetch 문서를 번역하였다.

fetch

Next.js는 각 서버 요청마다 영속적인 캐싱을 설정할 수 있도록 기본 Web fetch() API를 확장합니다.

브라우저에서는 cache 옵션을 사용하여 fetch 요청이 브라우저의 HTTP 캐시와 상호작용하는 방법을 나타냅니다. 이 확장 기능을 사용하면 cache는 서버 측 fetch 요청이 프레임워크의 영속적인 HTTP 캐시와 상호작용하는 방법을 나타냅니다.

Server Components 내에서는 async와 await를 사용하여 fetch를 직접 호출할 수 있습니다.

// app/page.tsx
export default async function Page() {
  // 이 요청은 수동으로 무효화될 때까지 캐시됩니다.
  // `getStaticProps`와 유사합니다.
  // `force-cache`가 기본값이며 생략할 수 있습니다.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
 
  // 이 요청은 매 요청마다 다시 가져와야 합니다.
  // `getServerSideProps`와 유사합니다.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
 
  // 이 요청은 10초 동안 캐시되어야 합니다.
  // `getStaticProps`의 `revalidate` 옵션과 유사합니다.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })
 
  return <div>...</div>
}

fetch(url, options)

Next.js는 Web fetch() API를 확장했으므로 기본적으로 사용 가능한 네이티브 옵션을 사용할 수 있습니다.

또한 Next.js는 클라이언트와 서버 모두에서 fetch를 폴리필합니다. 따라서 Server and Client Components 양쪽에서 fetch를 사용할 수 있습니다.

options.cache

요청이 Next.js HTTP 캐시와 상호작용하는 방식을 구성합니다.

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

• force-cache (기본값) : Next.js는 HTTP 캐시에서 일치하는 요청을 찾습니다.
  • 일치하는 요청이 있고 캐시가 최신 상태라면 캐시에서 반환됩니다.
  • 일치하는 요청이 없거나 캐시가 오래되었다면 Next.js는 리소스를 원격 서버에서 가져와 캐시를 업데이트합니다.
• no-store : Next.js는 캐시를 확인하지 않고 모든 요청마다 원격 서버에서 리소스를 가져오며, 다운로드한 리소스로 캐시를 업데이트하지 않습니다.

알아두면 좋아요:
cache 옵션을 제공하지 않으면 Next.js는 동적 함수인 cookies()와 같은 경우를 제외하고 기본적으로 force-cache로 설정됩니다.
no-cache 옵션은 Next.js에서 no-store와 동일하게 동작합니다.

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

리소스의 캐시 지속 시간을 설정합니다(초 단위).

• false : 리소스를 무기한으로 캐시합니다. revalidate: Infinity와 의미적으로 동일합니다. HTTP 캐시는 시간이 지남에 따라 이전 리소스를 삭제할 수 있습니다.
• 0 : 리소스를 캐시하지 않습니다.
• number : (초 단위) 리소스의 캐시 지속 시간을 최대로 n초로 지정합니다.

알아두면 좋아요:
개별 fetch() 요청이 라우트의 기본 revalidate보다 낮은 revalidate 숫자를 설정하면 전체 라우트 갱신 간격이 줄어듭니다.
동일한 URL을 가진 같은 라우트의 두 개의 fetch 요청이 다른 revalidate 값을 가지면 더 낮은 값이 사용됩니다.
편의를 위해 revalidate가 숫자로 설정된 경우 cache 옵션을 설정할 필요가 없습니다. 0은 cache: 'no-store'를 의미하고 양의 값은 cache: 'force-cache'를 의미합니다.
{ revalidate: 0, cache: 'force-cache' } 또는 { revalidate: 10, cache: 'no-store' }와 같은 충돌하는 옵션은 오류가 발생합니다.

요약

요약:
fetch는 Next.js에서 서버의 각 요청마다 영속적인 캐싱을 설정할 수 있도록 하는 기능

• Next.js는 Web fetch() API를 확장하여 서버 측 fetch 요청이 프레임워크의 영속적인 HTTP 캐시와 상호작용할 수 있도록 함.
• fetch 함수는 Server Components 내에서 async와 await를 사용하여 호출할 수 있음.
• fetch 함수는 다양한 옵션을 받을 수 있고, options.cache 옵션은 요청이 Next.js의 HTTP 캐시와 상호작용하는 방법을 설정.
• options.cache에는 'force-cache'와 'no-store' 두 가지 옵션이 있고, 각각 캐시 사용 여부와 캐시 업데이트 방식을 나타냄.
• options.next.revalidate 옵션은 리소스의 캐시 지속 시간을 설정. 옵션 값으로 false, 0, 또는 양의 정수를 사용할 수 있음.