Next.js 08 - 풀 라우트 캐시

먼저 알아야 할 개념

Static Page 와 Dynamic Page

Next.js에서는 각 페이지가 정적으로 생성될지, 요청마다 동적으로 렌더링될지 내부적으로 판단한다.

조건	결과
동적 함수 사용 (cookies, headers 등)	Dynamic Page
fetch() 에 no-store 또는 캐시 없음	Dynamic Page
그 외의 모든 경우	Static Page

---

 

Full Route Cache란?

Static Page로 분류된 페이지는 빌드 타임 또는 요청 시 서버에서 생성되며,

결과 HTML과 RSC Payload를 Full Route Cache에 저장한다.

작동 방식

1. 페이지가 처음 요청될 때 렌더링

2. HTML과 RSC Payload가 Full Route Cache에 저장됨

3. 이후 동일한 경로 요청 시 캐시된 결과를 그대로 반환

---

Revalidate (페이지 재검증)

Full Route Cache는 정적이지만 업데이트가 가능하다.

 

・ 캐시된 페이지를 먼저 반환 (STALE 상태)

・ 백그라운드에서 새 데이터를 기반으로 페이지 재생성

・ 이후부터는 업데이트된 페이지로 응답

---

Dynamic Page의 특징

・ Request Memoization, Data Cache는 정상 작동

・ Full Route Cache 사용 불가

・ 빌드 타임에 사전 생성되지 않음

・ 성능 저하 가능성 (매번 렌더링, fetch 발생)

대부분의 페이지는 Static Page로 구현하는 것이 성능상 유리!

---

generateStaticParams로 동적 경로도 정적 처리하기

[id]와 같은 동적 세그먼트도 generateStaticParams() 를 통해 미리 빌드할 경로를 지정할 수 있다.

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

 

・ /book/1, /book/2 경로 페이지는 사전 렌더링되어 Static Page

・ 그 외 경로는 접근 시 실시간 렌더링되는 Dynamic Page

---

쿼리 스트링이 필요한 페이지는?

Suspense 태그 사용!

<Suspense fallback={<div>Loading...</div>}>
  <SearchBar />
</Suspense>

 

빌드 타임에는 SearchBar 에 필요한 쿼리스트링이 없기 때문에 SSR 시 오류가 발생할 수 있다.

Suspense 태그를 사용하여 렌더링 시점을 지연하고 fallback 렌더링을 설정할 수 있다.