라우터 캐시

라우터 캐시

Next.js에는 사용자 세션 동안 개별 라우트 세그먼트별로 리액트 서버 컴포넌트 페이로드를 저장하는 인메모리 클라이언트 측 캐시가 있습니다. 이것을 라우터 캐시라고 합니다.

라우터 캐시는 클라이언트 사이드 캐시 또는 프리페치 캐시로 언급되곤 합니다. 프리페치 캐시는 미리 가져온 라우트 세그먼트를 나타내며, 클라이언트 측 캐시는 방문하고 미리 가져온 세그먼트를 포함한 전체 라우터 캐시를 나타냅니다. 이 캐시는 특히 Next.js 및 서버 컴포넌트에 적용되며, 브라우저의 bfcache와는 다르지만 비슷한 결과를 보입니다.

라우터 캐시의 작동 방식

사용자가 라우트 간을 이동하면 Next.js는 방문한 라우트 세그먼트를 캐시하고 사용자가 방문할 가능성이 있는 라우트를 프리페치합니다.

이로 인해 사용자에게 다음과 같은 개선된 탐색 경험이 제공됩니다.

• 방문한 라우트가 캐시되어 있기 때문에 즉시 앞/뒤로 이동이 가능하고 프리페치 및 부분 렌더링으로 인해 새로운 라우트로의 빠른 탐색이 가능합니다.
• 탐색 간 전체 페이지가 다시 로드되지 않으며 리액트 상태 및 브라우저 상태가 보존됩니다.

지속 기간

캐시는 브라우저의 임시 메모리에 저장됩니다. 라우터 캐시가 얼마나 오래 지속되는지 결정하는 두 가지 요소가 있습니다.

1. 세션: 캐시는 탐색 간에 지속됩니다. 그러나 페이지를 새로고침하면 지워집니다.
2. 자동 무효화 기간: 특정 시간이 경과하면 개별 세그먼트의 캐시는 자동으로 무효화됩니다. 기간은 라우트가 정적 또는 동적으로 렌더링되는지 여부에 따라 달라집니다:

• 동적으로 렌더링됨: 30초
• 정적으로 렌더링됨: 5분

페이지 새로고침은 모든 캐시된 세그먼트를 지우지만 자동 무효화 기간은 마지막으로 액세스되거나 생성된 후 개별 세그먼트에만 영향을 미칩니다. 동적으로 렌더링된 라우트에 prefetch={true}를 추가하거나 router.prefetch를 호출하면 5분 동안 캐싱할 수 있습니다.

무효화

라우터 캐시를 무효화하는 두 가지 방법이 있습니다.

1. 서버 액션에서 무효화

   • 경로별로 데이터를 즉시 검증하거나 (revalidatePath) 또는 캐시 태그를 사용하여 (revalidateTag) 무효화
   • 쿠키를 사용하는 라우트가 오래된 것으로 되지 않도록 cookies.set 또는 cookies.delete를 사용하면 라우터 캐시가 무효화됩니다 (예: 인증).

2. router.refresh를 호출하면 라우터 캐시가 무효화되고 현재 라우트에 대한 새로운 요청이 서버로 전송됩니다.

선택 취소

라우터 캐시에서 선택 취소하는 것은 불가능합니다.

<Link> 컴포넌트의 prefetch prop을 false로 설정하여 프리페치에서 선택 취소할 수 있습니다. 그러나 이렇게 하면 탭바나 앞뒤로 이동과 같은 중첩된 세그먼트 간의 즉시 탐색을 허용하기 위해 30초 동안 라우트 세그먼트를 임시로 저장합니다. 방문한 라우트는 계속 캐시됩니다.

캐시 상호 작용

다른 캐싱 메커니즘을 설정할 때 그들이 서로 어떻게 상호 작용하는지 이해하는 것이 중요합니다.

데이터 캐시 및 전체 라우트 캐시

• 데이터 캐시를 다시 유효화하거나 선택 취소하면 전체 라우트 캐시가 무효화됩니다. 렌더링 출력이 데이터에 따라 달라지기 때문입니다.
• 전체 라우트 캐시를 무효화하거나 선택 취소해도 데이터 캐시에 영향을 주지 않습니다. 캐시된 데이터와 캐시되지 않은 데이터가 모두 있는 라우트를 동적으로 렌더링할 수 있습니다. 페이지의 대부분이 캐시된 데이터를 사용하지만 요청 시간에 가져와야 하는 몇몇 컴포넌트에 의존하는 경우 모든 데이터를 다시 가져오는 성능 영향에 대해 걱정할 필요 없이 동적으로 렌더링할 수 있습니다.

데이터 캐시 및 클라이언트 측 라우터 캐시

• Route Handler에서 데이터 캐시를 다시 유효화해도 즉시 라우터 캐시를 무효화하지 않습니다. 라우터 핸들러는 특정 라우트에 연결되어 있지 않기 때문입니다. 이는 라우터 캐시가 하드 리프레시를 하거나 자동 무효화 기간이 경과할 때까지 이전 페이로드를 계속 제공한다는 것을 의미합니다.
• 데이터 캐시와 라우터 캐시를 즉시 무효화하려면 Server Action에서 revalidatePath나 revalidateTag를 사용할 수 있습니다.