데이터 캐시

데이터 캐시

Next.js는 수신되는 서버 요청 및 배포를 걸쳐 데이터 패치의 결과를 지속시키는 내장 Data Cache를 갖고 있습니다. 이것은 Next.js가 각 서버 요청이 지속적인 캐싱 의미론을 설정할 수 있도록 기본 fetch API를 확장하므로 가능합니다.

브라우저에서 fetch의 cache 옵션은 요청이 브라우저의 HTTP 캐시와 어떻게 상호작용할지를 나타내는 반면, Next.js에서의 cache 옵션은 서버 측 요청이 서버의 데이터 캐시와 어떻게 상호작용할지를 나타냅니다.

기본적으로 fetch를 사용하는 데이터 요청은 캐시됩니다. 캐싱 동작을 구성하기 위해 fetch의 cache 및 next.revalidate 옵션을 사용할 수 있습니다.

데이터 캐시 작동 방식

• 렌더링 중 fetch 요청이 처음 호출되면 Next.js는 캐시된 응답을 위해 데이터 캐시를 확인합니다.
• 캐시된 응답이 발견되면 즉시 반환되고 메모이제이션됩니다.
• 캐시된 응답이 발견되지 않으면 데이터 소스에 요청이 이루어지고 결과는 데이터 캐시에 저장되며 메모이제이션됩니다.
• 캐시되지 않은 데이터의 경우 (예: { cache: 'no-store' }), 결과는 항상 데이터 소스에서 가져오며 메모이제이션됩니다.
• 데이터가 캐시되든 안 되든 요청은 항상 메모이제이션되어 React 렌더 패스 중 동일한 데이터에 대한 중복 요청을 피합니다.

지속 시간

데이터 캐시는 재검증하거나 선택 해제하지 않는 한 수신 요청 및 배포를 거쳐 지속됩니다.

재검증

캐시된 데이터는 두 가지 방법으로 재검증 될 수 있습니다.

1. 시간 기반 재검증: 일정 시간이 경과한 후에 데이터를 재검증하고 새 요청이 이루어집니다. 이는 데이터가 자주 변경되지 않고 신선도가 그리 중요하지 않은 경우에 유용합니다.
2. 요청 기반 재검증: 이벤트(예: 폼 제출)를 기반으로 데이터를 재검증합니다. 요청 기반 재검증은 한 번에 여러 데이터 그룹을 재검증하기 위해 태그 기반 또는 경로 기반 접근법을 사용할 수 있습니다. 이는 가능한 한 최신 데이터가 표시되도록 하려는 경우(예: 무작정 CMS의 콘텐츠가 업데이트될 때)에 유용합니다.

시간 기반 재검증

일정 시간 간격으로 데이터를 재검증하려면 fetch의 next.revalidate 옵션을 사용하여 리소스의 캐시 수명(초 단위)을 설정할 수 있습니다.

// 최대 매시간마다 재검증
fetch('https://...', { next: { revalidate: 3600 } })

대안으로, 라우트 세그먼트 설정 옵션을 사용하여 세그먼트 내의 모든 fetch 요청을 설정하거나 fetch를 사용할 수 없는 경우를 위해 사용할 수 있습니다.

시간 기반 재검증이 작동하는 방식

• revalidate와 함께 fetch 요청이 처음 호출되면, 데이터는 외부 데이터 소스에서 가져와 데이터 캐시에 저장됩니다.
• 지정된 시간 내에 호출된 모든 요청은 캐시된 데이터를 반환합니다.
• 시간이 지나면, 다음 요청은 여전히 캐시된 (이제 오래된) 데이터를 반환합니다.
  • Next.js는 백그라운드에서 데이터의 재검증을 트리거합니다.
  • 데이터가 성공적으로 가져와지면, Next.js는 새로운 데이터로 데이터 캐시를 업데이트합니다.
  • 백그라운드 재검증이 실패하면 이전 데이터는 변경되지 않습니다.

이것은 stale-while-revalidate 동작과 유사합니다.

요청 기반 재검증

데이터는 경로별(revalidatePath) 또는 캐시 태그별(revalidateTag)로 요청에 따라 재검증될 수 있습니다.

요청 기반 재검증 작동 방식

• fetch 요청이 처음 호출될 때, 데이터는 외부 데이터 소스에서 가져와 데이터 캐시에 저장됩니다.
• 요청 기반 재검증이 트리거되면, 적절한 캐시 항목은 캐시에서 제거됩니다.
  • 이것은 시간 기반 재검증과 다르게, 새로운 데이터가 가져와질 때까지 오래된 데이터를 캐시에 유지합니다.
• 다음 요청이 이루어지면 다시 캐시 MISS가 발생하며, 데이터는 외부 데이터 소스에서 가져와 데이터 캐시에 저장됩니다.

캐싱 선택 해제

개별 데이터 페치에 대해서는 cache 옵션을 no-store로 설정하여 캐싱을 선택 해제할 수 있습니다. 이는 fetch가 호출될 때마다 데이터를 가져온다는 것을 의미합니다.

// 개별 `fetch` 요청에 대해 캐싱 선택 해제
fetch(`https://...`, { cache: 'no-store' })

대안으로 특정 라우트 세그먼트에 대한 캐싱을 선택 해제하기 위해 라우트 세그먼트 설정 옵션을 사용할 수 있습니다. 이는 라우트 세그먼트 내의 모든 데이터 요청에 영향을 미치며, 타사 라이브러리도 포함됩니다.

// 라우트 세그먼트 내의 모든 데이터 요청에 대해 캐싱 선택 해제
export const dynamic = 'force-dynamic'