App Router (7) - 풀 라우트 캐시(Full Route Cache)

2026.09.26 · 2분 읽기 · 조회 0

풀 라우트 캐시

Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능이다.
Page Router의 SSG 기능이라고 생각하면 된다. (SSG 정리글)
빌드 타임에 한 번 사전 렌더링을 하고, 모든 요청에 해당 페이지를 바로 보내주기 때문에 속도가 매우 빠르다.

Next의 페이지들은 자동으로 Static과 Dynamic 페이지로 나뉜다.
이 중 Static 페이지에만 풀라우트 캐시가 적용된다.

Dynamic Page로 설정되는 기준

특정 페이지가 접속 요청을 받을 때 마다 매번 변화가 생기거나, 데이터가 달라질 경우 Dynamic 페이지로 설정 된다.

1. 캐시되지 않는 Data Fetching을 사용할 경우

async function Comp() {
  const response = await fetch('...');
  return <div>...</div>
}

fetch 옵션을 설정하지 않거나 cache : "no-store"을 설정해 매 번 새로운 데이터를 불러오는 경우에는 해당 컴포넌트들을 사용하는 모든 페이지들은 Dynamic Page가 된다.

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

import { cookies, headers } from "next/headers";
 
async function Comp() {
  const cookieStore = cookies();
  const theme = cookieStore.get("theme");
 
  const headersList = headers();
 
  return <div>...</div>
}

컴포넌트가 동적 함수를 사용하는 경우 해당하는 페이지는 Dynamic Page가 된다.

Static Page로 설정되는 기준

Dyamic Page가 아니면 모두 Static Page가 된다.

Dynamic Page는 빌드 타임에 사전 렌더링을 하지 않아, 매 번 브라우저의 접속 요청 시 마다 렌더링을 해주어야 한다.

Revalidation

페이지 라우터의 ISR처럼 특정 주기 마다 revalidation 이 가능하다.

A라는 페이지가 Static 으로 되어 풀라우트 캐싱이 되어 있더라도, 구성하는 컴포넌트 중 하나가 fetch에 revalidate 옵션이 붙어 있다면, 해당 페이지는 자동으로 ISR 페이지로 전환된다.

동적 경로 static page 만들기

search?q=검색어와 같은 쿼리스트링을 사용하는 경우는 Static으로 만들어줄 수 없다. 그러나 book/1, book/2 처럼 동적 경로를 갖는 params 페이지의 경우에는 Static으로 만들어줄 수 있다.
빌드 타임에 어떤 페이지들을 미리 생성할지만 설정해주면 된다.

export function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }, { id: "3" }];
}

페이지 컴포넌트 위에 위와 같은 함수를 만들어주면 book/1, book/2,book/3 페이지가 빌드 타임에 정적으로 생성되는걸 확인할 수 있다. 풀라우트 캐시로 잘 저장된다.
숫자가 아닌 문자열로 작성해야 함에 주의한다.
Page Router의 getStaticPaths 와 거의 동일하다.

export const dynamicParams = false;

해당 함수를 가장 위에 추가해주면, 위에 설정한 1, 2, 3 페이지를 제외한 book/4와 같은 페이지로 접속하면 not-found페이지를 반환한다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글