Request 메모이제이션

Request 메모이제이션

React는 동일한 URL과 옵션을 가진 Request를 자동으로 메모이제이션하기 위해 fetch API를 확장합니다. 이는 React 컴포넌트 트리에서 여러 위치에서 동일한 데이터를 위해 fetch 함수를 호출하더라도 한 번만 실행할 수 있다는 것을 의미합니다.

예를 들어, 루트 전체에서 동일한 데이터를 사용해야 하는 경우 (예: 레이아웃, 페이지 및 여러 컴포넌트에서) 트리의 상단에서 데이터를 가져온 다음 컴포넌트간에 props를 전달할 필요가 없습니다. 대신, 동일한 데이터에 대한 네트워크를 통한 여러 요청의 성능적인 영향에 대해 걱정하지 않고 필요한 컴포넌트에서 데이터를 가져올 수 있습니다.

async function getItem() {
  // `fetch` 함수는 자동으로 메모이제이션되며 결과는 캐시됩니다
  const res = await fetch('https://.../item/1')
  return res.json()
}

// 이 함수는 두 번 호출되지만 처음에만 실행됩니다
const item = await getItem() // 캐시 MISS

// 두 번째 호출은 루트의 어느 곳에서나 가능합니다
const item = await getItem() // 캐시 HIT

Request 메모이제이션의 작동 방식

• 루트를 렌더링하는 동안 특정 요청이 처음 호출되면 그 결과는 메모리에 없으므로 캐시 MISS가 됩니다.
• 따라서 함수가 실행되고 데이터는 외부 소스에서 가져와 메모리에 저장됩니다.
• 동일한 렌더링 패스에서의 요청의 후속 함수 호출은 캐시 HIT가 되며, 함수를 실행하지 않고도 메모리에서 데이터가 반환됩니다.
• 루트가 렌더링되고 렌더링 패스가 완료되면 메모리는 "리셋"되고 모든 요청 메모이제이션 항목이 지워집니다.

• Request 메모이제이션은 Next.js의 기능이 아니라 React의 기능입니다. 다른 캐싱 메커니즘과 어떻게 상호 작용하는지 보여주기 위해 여기에 포함되어 있습니다.
• 메모이제이션은 fetch Request의 GET 메서드에만 적용됩니다.
• 메모이제이션은 React 컴포넌트 트리에만 적용됩니다.
  • generateMetadata, generateStaticParams, 레이아웃, 페이지 및 기타 서버 컴포넌트 내의 fetch 요청에 적용됩니다.
  • 라우트 핸들러 내의 fetch 요청에는 적용되지 않습니다. 왜냐하면 그것들은 React 컴포넌트 트리의 일부가 아니기 때문입니다.
• fetch가 적절하지 않은 경우 (예: 일부 데이터베이스 클라이언트, CMS 클라이언트 또는 GraphQL 클라이언트), 함수를 메모이제이션하기 위해 React cache 함수를 사용할 수 있습니다.

지속 시간

캐시는 서버 Request의 수명 동안 유지되며, React 컴포넌트 트리 렌더링이 완료될 때까지 지속됩니다.

재검증

메모이제이션이 서버 Request 간에 공유되지 않으며 렌더링 중에만 적용되기 때문에 재검증할 필요가 없습니다.

선택 해제

fetch Request에서 메모이제이션을 선택 해제하려면 요청에 AbortController signal을 전달할 수 있습니다.

const { signal } = new AbortController()
fetch(url, { signal })