💡 캐싱 대상 : 렌더링 작업, 데이터 요청
💡 목적: 애플리케이션 성능을 향상, 비용 절감

Overview

• 캐시 : 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소
• 캐싱 : 파일 복사본을 캐시 또는 임시 저장 위치에 저장하여 보다 빠르게 액세스할 수 있도록 하는 프로세스

By default, Next.js will cache as much as possible to improve performance and reduce cost. This means routes are statically rendered and data requests are cached unless you opt out.

Next.js의 캐시는 성능향상과 비용 절감을 가능하게 한다. 이것은 의미는 경로는 정적으로 렌더링되고 데이터 요청은 캐시 된다는 것이다.

매커니즘	What	Where	Purpose	Duration
https://nextjs.org/docs/app/building-your-application/caching#request-memoization	함수의 반환 값	server	React 구성 요소 트리에서 데이터 재사용	요청별 수명 주기
https://nextjs.org/docs/app/building-your-application/caching#data-cache	데이터	server	사용자 요청 및 배포 전반에 걸쳐 데이터 저장	지속적(재검증 가능)
https://nextjs.org/docs/app/building-your-application/caching#full-route-cache	HTML 및 RSC 페이로드	server	렌더링 비용 절감 및 성능 향상	지속적(재검증 가능)
https://nextjs.org/docs/app/building-your-application/caching#router-cache	RSC 페이로드	client	탐색 시 서버 요청 줄이기	사용자 세션 또는 시간 기반

1. Request Memoization

React는 fetchAPI를(https://nextjs.org/docs/app/building-your-application/caching#fetch) 확장하여 동일한 URL과 옵션을 가진 요청을 자동으로 메모한다. 이는 React 컴포넌트 트리의 여러 위치에서 동일한 데이터에 대한 가져오기 함수를 한 번만 실행하면서 호출할 수 있음을 의미한다.

• 핵심 키워드 : 페이지 렌더링, function return, server

React 컴포넌트가 렌더링되는 동안에만 캐시된 데이터를 사용하여 성능을 향상시키고, 중복된 요청을 방지하기 위해 사용됩니다.

💡 주요 목적
일반적으로 페이지를 렌더링할 때 서버에서 데이터를 가져와야 하는데, 이를 여러 컴포넌트에서 중복해서 요청하는 것은 비효율적일 수 있다. 따라서 한 번 요청된 데이터를 캐시하여 여러 컴포넌트에서 재사용할 수 있게한다.
💡 The fetch function is automatically memoized and the result is cached.

(참고) Request Memoization는 next.js가 아닌 react의 기능이다.

• route을 렌더링하는 동안, 처음 특정한 요청이 호출되면 그것의 결과는 메모리에 저장되지 않고 cache된다. MISS
• 함수가 실행되고, 외부 소스에서 데이터를 가져오고 그 결과가 메모리에 저장된다. SET
• 동일한 렌더 경로에서 요청의 후속 함수 호출은 캐시가 되며 HIT( 데이터는 함수를 실행하지 않고 메모리에서 반환된다.
• route가 렌더링되고 렌더링 패스가 완료되면 메모리가 "재설정"되고 모든 요청 메모 항목이 지워진다.
  • why? 이전 요청에 대한 캐시를 유지하는 것은 메모리를 낭비하고, 불필요한 데이터를 유지하는 것일 수 있다. 특히 React 애플리케이션에서는 렌더링과 관련된 상태와 데이터를 최신 상태로 유지하는 것이 중요하다. 따라서 다음 요청에 대한 메모이제이션을 위해 새로운 공간을 확보한다. 이것은 애플리케이션의 리소스 관리와 성능 향상을 위한 일반적인 방법 중 하나이다. ( = Request Memoization은 페이지 렌더링을 위한 것이므로 페이지가 렌더링 된 후에는 비워준다)
    

💡 route : 특정 URL에 해당하는 페이지 또는 경로
ex) /about
💡 redering pass : 페이지를 렌더링하는 과정. 라우트 매칭, 렌더링, 데이터 가져오기 등 과정이 포함된다.

• Memoization은 fetch 요청의 GET 메서드에만 적용된다.
• Memoization은 React 구성 요소 트리에만 적용된다.

2. Data Cache

Next.js에는 내장된 데이터 캐시가 있다. 이 캐시는 서버 요청 및 배포를 통해 데이터 가져오기의 결과를 유지한다.

Next.js extends the native fetch API to allow each request on the server to set its own persistent caching semantics.

• 핵심 키워드 : revalidate , server

• 처음 렌더링 중에 fetch 요청이 호출되면, Next.js는 캐시된 응답을 확인하기 위해 데이터 캐시를 확인한다.

• 캐시된 응답이 발견되면 즉시 반환되고 메모이제이션된다. 캐시된 응답이 발견되지 않으면 데이터 소스로 요청이 이루어지고, 결과가 데이터 캐시에 저장되고 메모이제이션된다.

• 캐시되지 않은 데이터의 경우(예: { cache: 'no-store' }), 항상 데이터 소스에서 결과가 가져와지고 메모이제이션된다. 데이터가 캐시되었든 캐시되지 않았든, 요청은 항상 메모이제이션되어 React 렌더링 패스 중에 동일한 데이터에 대한 중복 요청이 발생하지 않도록 한다.

• Differences between the Data Cache and Request Memoization

  1. 지속성 (Persistence):

     • 메모이제이션: 요청의 수명 동안만 지속된다. 한 번의 요청에서 다음 요청으로의 메모이제이션 데이터는 유지되지 않는다.
     • 데이터 캐시: 수신 요청 및 배포를 거쳐도 지속된다. 즉, 이전에 캐시된 데이터는 여러 요청 및 서버 배포 간에 유지된다.

  2. 네트워크 교차점 (Network Boundary):

     • 메모이제이션: 렌더링 서버에서 데이터 캐시 서버(예: CDN 또는 Edge Network) 또는 데이터 소스(예: 데이터베이스 또는 CMS)로 네트워크 경계를 건너가야 하는 동일한 렌더링 패스 내의 중복 요청 수를 줄일 수 있다.
     • 데이터 캐시: 원본 데이터 소스로의 요청 수를 줄일 수 있다. 즉, 더 많은 요청을 데이터 캐시로 리디렉션할 수 있어서 원본 데이터 소스에 대한 요청 수를 줄일 수 있습니다.

     💡 네트워크 교차점 : 데이터가 네트워크를 통해 이동하는 동안 데이터가 경유하는 지점

     • 메모이제이션 네트워크 교차점 : 클라이언트와 서버 간의 통신 경로
     • 데이터 캐시 네트워크 교차점: 서버와 클라이언트 간의 통신 경로

• 데이터 캐시는 재검증하거나 선택 해제하지 않는 한 들어오는 요청 및 배포 전반에 걸쳐 지속된다.

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

시간 기반 재검증(Time-based Revalidation)

: 일정 시간이 지난 후 새로운 요청이 발생한 후 데이터를 재검증

fetch('https://...', { next: { revalidate: 60 } })

• The first time a fetch request with revalidate is called, the data will be fetched from the external data source and stored in the Data Cache.
• 60초 이내에서는 return the cached data.
• After the timeframe(60초), the next request will still return the cached (이제는 최신이 아닌) data.
  • Next.js will trigger a revalidation of the data in the background.
  • Once the data is fetched successfully, Next.js will update the Data Cache with the fresh data.
  • 백그라운드 재유효화가 실패하면, 이전 데이터는 변경되지 않은 채로 유지된다.

주문형 재검증(On-demand Revalidation:)

:이벤트(예: 양식 제출)를 기반으로 데이터를 재검증

데이터는 경로(revalidatePath) 또는 캐시 태그(revalidateTag)에 따라 필요할 때 필요에 따라 재유효화될 수 있다.

• 처음으로 fetch 요청이 발생하면, 데이터는 외부 데이터 소스에서 가져와서 데이터 캐시에 저장된다.
• 필요에 따라 재유효화가 트리거(revalidateTag)되면, 적절한 캐시 항목이 캐시에서 삭제됩니다. 이것은 시간 기반 재유효화와는 다르게 캐시에 있는 이전 데이터를 fresh 데이터가 가져올 때까지 유지하지 않는다.
• 다음 요청에서 it will be a cache MISS again, and the data will be fetched from the external data source and stored in the Data Cache.

// Opt out of caching for an individual fetch request
fetch(https://..., { cache: 'no-store' })

cache 옵션을 no-store로 설정하여 캐싱에서 제외할 수 있다.

export const dynamic = 'force-dynamic'

특정 경로 세그먼트에 대한 캐싱을 제외하려면 Route Segment Config 옵션을 사용할 수도 있다.

3. Full Route Cache, Router Cache

Full Route Cache (전체 라우트 캐시)

Full Route Cache 주요 목적은 Next.js에서 라우트의 렌더링 결과를 캐시하여 서버에서 클라이언트로의 반복적인 렌더링 요청을 줄이고, 페이지 로드 성능을 향상시키는 것.

전체 라우트 캐시 (Full Route Cache): 서버 측에서 페이지의 HTML 렌더링 결과를 캐시
라우터 캐시 (Route Cache) : 클라이언트 측에서 사용자가 방문한 경로 세그먼트를 캐시하여 사용자의 경로 이동을 더 빠르게 만든다.

라우터 캐시와 전체 경로 캐시의 차이점

• 라우터 캐시는 사용자 세션 동안 브라우저에 React 서버 구성 요소 페이로드를 임시로 저장한다. 정적 및 동적으로 렌더링된 경로 모두에 적용된다.
• 전체 경로 캐시는 여러 사용자 요청에 걸쳐 서버에 React 서버 구성 요소 페이로드와 HTML을 지속적으로 저장한다. 정적으로 렌더링된 경로만 캐시한다.

기본적으로 next.js의 SSG에 의해 자동으로 실행 된다.

Router Cache

• 목적 라우터 캐시는 사용자가 라우트 간을 이동하는 동안 Next.js가 방문한 라우트 세그먼트를 캐시하고, 사용자가 이동할 가능성이 있는 경로를 미리 가져옴으로써 사용자의 네비게이션 경험을 향상시킨다.
  
• 기능
  1. 사용자가 라우트 간을 이동할 때 방문한 라우트 세그먼트를 캐시한다.
  2. 사용자가 뷰포트에 있는 컴포넌트를 기반으로 이동할 가능성이 있는 경로를 미리 가져온다.
  3. 방문한 경로는 캐시되어 즉시 이전/다음으로의 네비게이션을 가능하게 하며, 미리 가져온 경로로 빠른 네비게이션이 가능하다.
  4. 네비게이션 간에 전체 페이지를 다시로드하지 않으며, React 상태와 브라우저 상태가 보존된다.
  5. 사용자의 경험을 향상시키기 위해 이전에 방문한 경로를 캐시하고, 미래에 이동할 가능성이 있는 경로를 미리 가져온다.

자동 무효화 기간

개별 세그먼트의 캐시는 특정 시간이 지난 후 자동으로 무효화된다. 이 기간은 경로가 정적으로 또는 동적으로 렌더링되는지에 따라 달라진다.

• 동적으로 렌더링된 경우: 30초
• 정적으로 렌더링된 경우: 5분
• 개별 세그먼트가 마지막으로 액세스되거나 생성된 시간부터 영향을 받는다.

라우터 캐시 무효화 예제

    import { useRouter } from 'next/router';
    import { cookies } from 'cookies-library'; // 쿠키 관련 라이브러리를 가져옵니다.
    
    // useRouter 훅을 사용하여 라우터를 가져옵니다.
    const router = useRouter();
    
    // 서버 액션에서 revalidatePath 또는 revalidateTag를 사용하여 데이터를 재유효화하는 예시입니다.
    // 경로를 통해 데이터를 재유효화할 경우
    const revalidatePath = '/api/data'; // 재유효화할 경로를 지정합니다.
    router.revalidate(revalidatePath);
    
    // 캐시 태그를 통해 데이터를 재유효화할 경우
    const revalidateTag = 'data-tag'; // 재유효화할 캐시 태그를 지정합니다.
    router.revalidate({ tag: revalidateTag });
    
    // cookies.set 또는 cookies.delete를 사용하여 쿠키를 통해 라우터 캐시를 무효화하는 예시입니다.
    // 쿠키를 설정하여 라우터 캐시를 무효화할 경우
    const cookieName = 'auth'; // 무효화할 쿠키의 이름을 지정합니다.
    const cookieValue = 'expired'; // 쿠키의 값을 지정합니다.
    cookies.set(cookieName, cookieValue);
    
    // 쿠키를 삭제하여 라우터 캐시를 무효화할 경우
    cookies.delete(cookieName);
    
    // router.refresh를 호출하여 라우터 캐시를 무효화하는 예시입니다.
    router.refresh();

router.refresh, revalidatePath 또는 revalidateTag를 호출하여 무효화할 수 있다. 이렇게 하면 캐시가 지워지고 서버에 새로운 요청이 보내져 최신 데이터가 표시된다.

라우터 캐시 적용 예제

    const router = useRouter();
    ...
    router.prefetch('/about'); 
    

    <Link href="/example" **prefetch={true}**>
      <a>Example Page</a>
    </Link>

router.prefetch('/about')를 호출하면 Next.js는 사용자가 '/about' 경로로 이동할 가능성이 높다고 가정하고 해당 경로에 대한 데이터를 미리 가져온다. 이것은 페이지를 방문하기 전에 데이터를 사전로드하여 사용자 경험을 향상시킬 수 있는 방법 중 하나다.

실제로 사용자가 '/about' 페이지로 이동하지 않아도 이 경로에 대한 데이터가 사전에 가져와지므로, 사용자가 해당 페이지로 이동할 때 더 빠른 로딩 속도와 부드러운 페이지 전환을 제공할 수 있다.