Next.js의 fetch는 기본 웹 fetch() API를 확장하여 서버 측에서 각 요청마다 캐싱 및 재검증 설정을 할 수 있도록 도와준다.
이를 통해 데이터를 더 효율적으로 가져올 수 있다.
캐싱 동작을 직접 제어하려면 fetch 함수에서 cache 옵션을 설정해야 한다.
// 캐시 없이 매번 새로운 데이터 가져오기
const res = await fetch('<https://api.example.com/data>', { cache: 'no-store' });
// 캐시된 데이터 사용 또는 서버에서 가져와 캐시에 저장
const res = await fetch('<https://api.example.com/data>', { cache: 'force-cache' });
Next.js 15에서는 데이터를 특정 주기마다 갱신할 수 있도록 fetch 함수에서 next 옵션을 추가할 수 있다.
// 60초마다 데이터 재검증
const res = await fetch('<https://api.example.com/data>', {
next: { revalidate: 60 },
});