Next.js는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션 성능을 향상시키고 비용을 절감합니다.
Next.js는 기본적으로 정적으로 렌더링되고 데이터 요청을 캐시 됩니다. 캐싱 동작은 경로가 정적 또는 동적으로 렌더링되는지, 데이터가 캐시되는지 또는 캐시되지 않는지, 요청이 초기 방문 또는 후속 탐색의 일부인지 여부에 따라 달라지게 됩니다.
Request Memoization
동일한 데이터에 대한 가져오기 함수는 한번만 실행되어 호출할 수 있습니다.
async function getItem() {
// The `fetch` function is automatically memoized and the result
// is cached
const res = await fetch('https://.../item/1')
return res.json()
}
// This function is called twice, but only executed the first time
const item = await getItem() // cache MISS
// The second call could be anywhere in your route
const item = await getItem() // cache HITcache MISS는 캐시되지 않은 새로운 데이터를 가져온다는 것이고, cache HIT은 동일한 데이터를 가져오려하는 경우 캐시된 데이터를 사용한다는 의미입니다.
경로를 렌더링 하는 동안 데이터를 가져오는 요청이 처음 호출될 때 그 결과는 메모리에 저장되지 않고 캐시가 됩니다. 따라서 함수가 실행되고 외부 소스에서 데이터를 가져와 결과가 메모리에 저장됩니다. 동일한 렌더 패스에서 요청의 후속 함수 호출은 캐시가 되며, HIT 데이터는 함수를 실행하지 않고 캐시된 메모리에서 반환됩니다. 경로가 렌더링되고 렌더링 패흐가 완료되면 메모리가 재설정되고 모든 요청 메모 항목이 지워집니다.
캐시는 React 구성 요소 트리가 렌더링을 완료할 때까지 서버 요청의 수명 동안 지속됩니다.
메모이제이션을 서버 요청 간 공유되지 않고 렌더링 중에만 적용되므로 재검증할 필요가 없습니다.
요청 시 메모 기능을 선택 해제하려면 요청에 fetch를 전달하면 됩니다.
데이터 캐싱
Next.js에는 들어오는 서버 요청 및 배포 전반에 걸쳐 데이터 가져오기 결과를 유지하는 내장 데이터 캐시가 존재합니다. Next.js가 기본 API를 확장하여 서버의 각 요청이 영구 캐싱 의미를 설정할 수 있도록 하기 때문에 가능합니다.
브라우저에서 cache 옵션은 fetch 요청이 브라우저의 HTTP 캐시와 상호 작용하는 방식을 나타내며, Next.js에서 옵션은 cache 서버 측 요청이 서버의 데이터 캐시와 상호 작용하는 방식을 나타냅니다.
기본적으로 fetch를 사용하는 요청은 cache 됩니다.
https://nextjs.org/docs/app/building-your-application/caching
Data revalidation
revalidation은 데이터 캐시를 제거하고 최신 데이터를 다시 가져오는 과정입니다. 이는 테이터가 변경되어 최신 정보를 표시하려는 경우 유용합니다.
캐시된 데이터는 두 가지 방법으로 유효성을 다시 검사할 수 있습니다.
- 시간 기반 재검증: 일정 시간이 지나면 데이터를 자동으로 재검증합니다. 이는 자주 변경되지 않고 최신성이 중요하지 않은 데이터에 유용합니다.
- 주문령 재검증: 이벤트를 기반으로 데이터를 수동으로 재검증합니다. 주문형 재검증에서는 태그 기반 또는 경로 기반 접근 방식을 사용하여 데이터 그룹을 한번에 재검증할 수 있습니다. 이는 가능한 빨리 최신 데이터를 표시하려는 경우 유용합니다.
