풀 라우트 캐시 (Full Route Cache)

풀 라우트 캐시는 Next.js 서버에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능이다.

작동 방식

• 빌드 타임에 페이지를 미리 렌더링하는 과정에서 해당 페이지에 필요한 데이터들은 Request Memoizations이나 Data Cache 등의 캐싱 기능을 거친다.
• 렌더링이 완료된 결과를 'Full Route Cache'라는 이름으로 서버 측에 저장한다.
• 빌드 후 Next.js 서버가 실제로 가동되었을 때, 해당 페이지로 접속 요청이 들어오면 새롭게 렌더링할 필요없이 캐시된 페이지를 그대로 브라우저에 전송한다.

 

페이지 분류

Next.js에서 페이지는 정적 페이지와 동적 페이지로 분류되는데, Full Route Cache는 정적 페이지에만 적용된다.

동적 페이지로 설정되는 기준

동적 페이지는 특정 페이지가 접속 요청을 받을 때마다 매번 변화가 생기거나, 데이터가 달라질 경우에 해당한다.

다음과 같은 경우 자동으로 동적 페이지로 설정된다

1. 캐시되지 않는 Data Fetching을 사용할 경우 (서버 컴포넌트에만 해당)

async function Comp() {
  const response = await fetch('url', { cache: 'no-store' }); // 또는 아무런 캐싱 옵션이 설정되어있지 않을 때
  return <div>...</div>;
};

2. 동적 함수 (쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때

import { cookies } from "next/headers";

async function Comp() {
  const cookieStore = cookies();
  const theme = cookieStore.get("theme");
  return <div>...<div>;
};

import { headers } from "next/headers";

async function Comp() {
  const headerStore = headers();
  const authorization = headerStore.get("authorization");
  return <div>...<div>;
};

async function Page({ searchParams }) {
  const q = searchParams.q;
  return <div>...<div>;
};

 

이러한 동적 함수들은 접속 요청에 따라 자유롭게 변화할 수 있는 값을 다루기 때문에, 페이지를 정적으로 생성하면 이러한 변화에 대응할 수 없다. 따라서 이런 경우 자동으로 동적 페이지로 설정된다.

 

정적 페이지로 설정되는 기준

동적 페이지의 조건에 해당하지 않는 모든 페이지는 기본적으로 정적 페이지로 설정된다.
Full Route Cache는 이러한 정적 페이지에 적용되어, 빌드 시 미리 렌더링된 결과를 저장하고 빠르게 제공함으로써 성능을 최적화한다.

 

페이지 분류 기준표

동적 함수 사용	데이터 캐시 사용	페이지 분류
O	X	동적
X	O	동적
X	X	동적
X	O	정적
마지막 정적 페이지의 경우에만 풀 라우트 캐시가 적용된다.

 

Full Route Cache의 Revalidate

풀 라우트 캐시 또한 리벨리데이트가 가능하다. ISR 방식과 유사하다.

정적 페이지로 설정된, 빌드 타임에 미리 생성되어 풀 라우트 캐시에 저장되도록 설정된 페이지라도, 페이지를 구성하는 컴포넌트들 중 리벨리데이트 옵션이 붙은 데이터 페칭 요청이 존재한다면, 해당 리벨리데이트 시간에 따라 데이터 캐시와 페이지 캐시가 함께 업데이트된다.

예를 들어, 다음과 같이 리벨리데이트 옵션이 설정된 경우

async function Comp() {
  const response = await fetch("...", { next: { revalidate: 60 } });
  return <div>...<div>;
};

이 컴포넌트가 포함된 페이지는 60초마다 데이터 캐시와 풀 라우트 캐시가 함께 갱신된다.