fetch

Next.js는 네이티브 Web fetch() API를 확장하여 서버의 각 요청이 자체적인 지속적 캐싱 및 재검증 정책을 설정할 수 있도록 합니다.

브라우저에서 cache 옵션은 fetch 요청이 브라우저의 HTTP 캐시와 어떻게 상호작용할지를 나타냅니다. 이 확장을 통해 cache는 서버 측 fetch 요청이 프레임워크의 지속적인 데이터 캐시와 어떻게 상호작용할지를 나타냅니다.

서버 컴포넌트 내에서 async와 await를 사용하여 직접 fetch를 호출할 수 있습니다.

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초의 수명으로 캐시되어야 합니다.
  // `revalidate` 옵션이 있는 `getStaticProps`와 유사합니다.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });
 
  return <div>...</div>;
}

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초의 수명으로 캐시되어야 합니다.
  // `revalidate` 옵션이 있는 `getStaticProps`와 유사합니다.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });
 
  return <div>...</div>;
}

fetch(url, options)

Next.js는 Web fetch() API를 확장하므로, 사용 가능한 모든 네이티브 옵션을 사용할 수 있습니다.

options.cache

요청이 Next.js 데이터 캐시와 어떻게 상호작용해야 하는지 구성합니다.

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

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

알아두면 좋은 점:

• 버전 15에서 기본 캐시 옵션이 'force-cache'에서 'no-store'로 변경되었습니다. 이전 버전의 Next.js를 사용 중이라면 기본 캐시 옵션은 'force-cache'입니다.
• Next.js에서 no-cache 옵션은 no-store와 동일하게 작동합니다.

options.next.revalidate

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

리소스의 캐시 수명을 설정합니다(초 단위).

• false - 리소스를 무기한 캐시합니다. 의미상 revalidate: Infinity와 동일합니다. HTTP 캐시는 시간이 지남에 따라 오래된 리소스를 제거할 수 있습니다.
• 0 - 리소스가 캐시되는 것을 방지합니다.
• number - (초 단위) 리소스의 캐시 수명을 최대 n초로 지정합니다.

알아두면 좋은 점:

• 개별 fetch() 요청이 라우트의 기본 revalidate보다 낮은 숫자를 설정하면, 전체 라우트 재검증 간격이 감소합니다.
• 같은 라우트에서 같은 URL을 가진 두 fetch 요청의 revalidate 값이 다르면, 더 낮은 값이 사용됩니다.
• 편의상 revalidate가 숫자로 설정된 경우 cache 옵션을 설정할 필요가 없습니다.
• { revalidate: 3600, cache: 'no-store' }와 같은 충돌하는 옵션은 오류를 발생시킵니다.

options.next.tags

fetch(`https://...`, { next: { tags: ["collection"] } });

리소스의 캐시 태그를 설정합니다. 그런 다음 revalidateTag를 사용하여 데이터를 온디맨드로 재검증할 수 있습니다. 사용자 정의 태그의 최대 길이는 256자이며, 최대 태그 항목 수는 64개입니다.

문제 해결

Fetch cache: 'no-store'가 개발 환경에서 새로운 데이터를 보여주지 않음

Next.js는 로컬 개발 환경에서 더 빠른 응답과 청구되는 API 호출 비용 감소를 위해 서버 컴포넌트의 fetch 응답을 Hot Module Replacement (HMR) 전반에 걸쳐 캐시합니다.

기본적으로 HMR 캐시는 cache: 'no-store' 옵션이 있는 요청을 포함한 모든 fetch 요청에 적용됩니다. 이는 캐시되지 않은 요청이 HMR 새로 고침 사이에 새로운 데이터를 보여주지 않는다는 것을 의미합니다. 그러나 캐시는 탐색이나 전체 페이지 새로 고침 시 지워집니다.

자세한 정보는 serverComponentsHmrCache 문서를 참조하세요.

버전 기록