캐싱은 데이터 페칭 및 기타 연산 결과를 저장하여 동일한 데이터에 대한 향후 요청을 재작업하지 않고도 더 빠르게 처리할 수 있도록 하는 기술이다.

반면에 재검증(revalidation)은 전체 애플리케이션을 다시 빌드할 필요 없이 캐시 엔트리를 업데이트할 수 있도록 한다.

Next.js는 캐싱 및 재검증을 처리하기 위한 몇 가지 API를 제공한다. 이 페이지에서는 언제, 그리고 어떻게 이를 사용해야 하는지 안내한다.

• fetch
• cacheTag
• revalidateTag
• updateTag
• revalidatePath
• unstable_cache (Legacy)

1. fetch

기본적으로 fetch 요청은 캐시되지 않는다. 개별 요청을 캐시하려면 cache 옵션을 ‘force-cache’ 로 설정하면 된다.

• app/page.tsx

  export default async function Page() {
    const data = await fetch('https://...', { cache: 'force-cache' })
  }
  

fetch 요청은 기본적으로 캐시되지 않지만, Next.js는 fetch 요청이 있는 라우트를 사전렌더링하고 해당 HTML을 캐시한다. 라우트가 동적임을 보장라혀면 connection API를 사용하자.

fetch 요청이 반환된 데이터를 재검증하려면 next.revalidate 옵션을 사용할 수 있다.

• app/page.tsx

  export default async function Page() {
    const data = await fetch('https://...', { next: { revalidate: 3600 } })
  }
  

이 코드는 지정된 초가 지난 후 데이터를 재검증할 것이다.

또한, 태그를 지정하여 fetch 요청에 주문형 캐시 무효화(on-demand cache invalidation)를 활성화할 수 있다.

• app/lib/data.ts

  export async function getUserById(id: string) {
    const data = await fetch(`https://...`, {
      next: {
        tags: ['user'],
      },
    })
  }
  

자세한 사항은 fetch API reference 를 참조하자.