[NEXT] 풀 라우트 캐시 (Full Route Cache)

강수영·2025년 7월 10일
0

✅ 풀 라우트 캐시 (Full Route Cache)란?

Next 서버측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능을 말합니다.


🖼️ 풀 라우트 캐시의 동작 방식

  1. 빌드 타임(BUILD TIME)
    • /a 경로에 대해 fetch('~/api/A') 실행
    • 리퀘스트 메모이제이션 → MISS 발생 → 데이터 캐시는 SKIP → 백엔드 호출
    • 받은 데이터를 리퀘스트 캐시풀 라우트 캐시에 각각 저장 (SET)
  2. 접속 요청 시
    • /a 경로로 접근하면, 풀 라우트 캐시에서 바로 HIT
    • 별도 API 호출 없이 HTML 바로 응답

📌 페이지 유형과 Full Route Cache 적용 기준

Next.js App Router에서는 사용하는 기능에 따라 페이지가 정적(Static) 또는 동적(Dynamic) 으로 자동 구분되며, 이에 따라 풀 라우트 캐시(Full Route Cache) 적용 여부가 결정됩니다.


🟢 Static Page (정적 페이지)

  • ✅ 풀 라우트 캐시가 적용됨
  • 기본 동작 (Dynamic 조건에 해당하지 않으면 자동으로 Static 처리됨)

🔴 Dynamic Page (동적 페이지)

  • 풀 라우트 캐시가 적용되지 않음
  • 서버 컴포넌트만 해당 (⚠️ 클라이언트 컴포넌트는 페이지 유형에 영향을 주지 않음)

🔍 Dynamic Page가 되는 조건

  1. 캐시되지 않는 fetch 사용
  2. 쿠키, 헤더, 쿼리스트링동적 함수 사용

🖼️ 동적 함수 & 캐시 여부에 따른 페이지 분류


🔧 Next.js App Router에서 동적 경로 제한하기

📌 generateStaticParams()란?

generateStaticParams()Next.js App Router에서 정적 페이지를 생성할 때 사용하는 함수입니다.

Dynamic Route의 각 경로에 필요한 파라미터를 미리 정의해서 빌드 시 정적 HTML을 자동 생성할 수 있게 도와줍니다.

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

🚫 dynamicParams = false란?

이 설정은 generateStaticParams()에 명시된 param 외의 URL은 아예 라우팅 자체를 차단하고 404로 처리합니다.

export const dynamicParams = false;

이렇게 설정하면:

  • 지정된 param 외의 경로는 렌더링되지 않고,
  • notFound()를 호출하지 않아도 자동 404 응답 처리됩니다.

✅ 예시: 게시판 경로 제한

export const dynamicParams = false;

export function generateStaticParams() {
  return [
    { board: 'free' },
    { board: 'entertain' },
    { board: 'politics' },
  ];
}
  • 허용: /boards/free, /boards/entertain, /boards/politics
  • 차단: /boards/banana, /boards/other → 자동 404

📌 언제 사용하나?

  • 게시글, 상품 상세 페이지 등 경로가 고정된 dynamic route를 미리 렌더링하고 싶을 때
  • ISR(Incremental Static Regeneration) 없이도 정적 파일을 생성하고 싶을 때
profile
프론트엔드 개발자

0개의 댓글