소개

애플리케이션을 구축하는 동안 Next.js에서 흔히 발생하는 캐싱 문제는 많은 개발자에게 좌절감을 안겨주는 Next.js의 기본 캐싱 동작입니다. 많은 경우 캐싱은 리소스 복사본을 저장하여 페이지 로드 속도를 높이고 서버 로드를 줄이는 데 도움이 됩니다.
그러나 때로는 오래된 콘텐츠가 표시될 수 있으며, 이는 추가 시 새 블로그가 표시되는 블로그 피드와 같은 동적 애플리케이션에 문제가 될 수 있습니다.

데이터 캐싱 선택 해제

Next.js는 기본 웹 fetch() API를 확장하여 서버의 각 요청이 자체 영구 캐싱 의미를 설정할 수 있도록 합니다.

개별 가져오기 요청에 대한 캐싱을 선택 해제하려면 가져오기의 캐시 옵션을 'no-store'로 설정하면 됩니다. 그러면 요청이 있을 때마다 데이터를 동적으로 가져옵니다.

export default async function Page() {

  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
  const data = await dynamicData.json()
}

이것은 Next.js의 기본 캐싱 동작을 재정의하는 데 도움이 됩니다.