Request Memoization은 React에서 fetch API를 확장하여 동일한 URL과 파라미터를 가진 요청을 자동으로 Memoization하는 기능입니다. 그렇기 때문에 아래 그림에 나타난 것처럼 컴포넌트 트리의 여러 위치에서 동일한 데이터를 가져오는 fetch 함수가 호출되어도 실제 요청은 한 번만 실행됩니다. 이 그림에서는 Request A, B, C가 여러 번 호출되지만 실제로는 각 요청이 한 번씩만 실행되게 됩니다.

이처럼 각 요청이 memoization되기 때문에, 하나의 Route를 구성하는 각기 다른 레벨에 존재하는 컴포넌트들(예: 레이아웃, 페이지, 하위 컴포넌트 등)이 동일한 데이터에 접근해야 할 경우에, 최상위 컴포넌트에서 fetching해온 데이터를 일일이 props를 통해 전달할 필요없이 각 컴포넌트에서 데이터를 fetching하는 형태로 구현하면 됩니다. 아래 코드는 각 컴포넌트에서 데이터를 fetching하는 형태를 나타낸 예시 코드입니다.

async function getPosts() {
    // fetch 함수는 자동으로 memoization 되고, 요청 결과는 캐싱됨
    const res = await fetch('https://api.example.com/posts');
    return res.json();
}

async function Layout() {
    // 첫 번째 호출에서는 캐시 MISS가 발생하므로 실제 요청이 수행됨
    const posts = await getPosts(); // 캐시 MISS

    return (
        <Page />
    )
}

async function Page() {
    // 두 번째 호출에서는 캐시 HIT가 발생하므로 캐싱된 결과가 반환됨
    const posts = await getPosts(); // 캐시 HIT

    ...
}

아래 그림은 Request Memoization의 작동 방식을 그림으로 나타낸 것입니다. 먼저 특정 Route를 렌더링 하는 과정에서 fetch 요청이 처음 발생하면, 캐시 MISS가 발생하고 요청이 실행되며 요청의 결과는 메모리에 저장됩니다. 이후 동일한 Route에서 발생하는 fetch 요청에 대해서는 캐시 HIT가 발생하므로 요청이 실행되지 않고 메모리에 존재하는 캐싱된 데이터가 반환됩니다. 최종적으로 Route가 모두 렌더링되면 메모리가 초기화 되고 모든 Request Memoization 항목이 지워집니다.

NOTE. Request Memoization에서 기억해야 할 점들

• Request Memoization은 Next.js의 기능이 아니라 React에서 제공하는 기능
• Memoization은 fetch 요청의 GET 메서드에만 적용됨
• Memoization은 React 컴포넌트 트리에만 적용됨
  • generateMetadata(), generateStaticParams(), 레이아웃(Layouts), 페이지(Pages) 및 기타 서버 컴포넌트의 fetch 요청에 적용됨
  • Route Handlers는 React 컴포넌트 트리의 일부가 아니기 때문에 fetch 요청이 Memoization되지 않음
• fetch가 적합하지 않은 경우(예: 일부 데이터베이스 클라이언트, CMS 클라이언트, GraphQL 클라이언트 등)에는 React의 cache() 함수를 사용하여 함수를 Memoization할 수 있음

지속 시간 (Duration)

Request Memoization의 캐시는 서버 요청의 수명 동안 유지되며 React 컴포넌트 트리가 렌더링을 완료할 때까지 지속됩니다.

재검증 (Revalidating)

Memoization은 서버 요청 간에 공유되지 않고 렌더링 동안에만 적용되기 때문에 일반적인 캐시처럼 별도로 재검증할 필요가 없습니다.

캐싱 제외 (Opting out)

Request Memoization은 fetch 요청의 GET 메서드에만 적용되며, POST나 DELETE와 같은 다른 메서드에는 적용되지 않습니다. 그리고 이러한 기본 동작은 React에서 사용하는 최적화 방법 중 하나이기 때문에, 개발자가 강제로 이를 사용하지 않도록 변경하는 것은 권장되지 않습니다.