export default function Page() {
return (
<h1>페이지 캐싱 공부하기 🤓</h1>
);
}⚡️ 풀 라우트 캐시(Full Route Cache)
- Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는(미리 저장해놓는) 기능.
- SSG(정적 사이트 생성)와 비슷한 기능을 제공.
풀 라우트 캐시의 진행 과정
1️⃣ '/a' 라는 이름의 주소에 대해 빌드 타임에 렌더링을 진행한다.
2️⃣ 리퀘스트 메모이제이션이나 데이터 캐시 등의 기능을 거쳐 렌더링을 완료하게 되면, 그 결과를 풀 라우트 캐시 라는 이름으로 저장한다.
3️⃣ 빌드 타임 종료 후 서버 가동 시, '/a' 라는 주소에 대해 접속 요청이 들어오면 저장된 풀 라우트 캐시를 반환한다. 따라서 굉장히 빠른 속도로 페이지를 보여주게 된다.
어떤 상황에 풀 라우트 캐싱 과정을 진행할까?
Next는 페이지를 정적 페이지(Static Page)와 동적 페이지(Dynamic Page)로 분류한다.
이 때 두 페이지를 분류하는 기준은 '접속 요청 시마다 변화가 생기거나 데이터가 달라지느냐' 이다. 이 기준에 해당된다면 동적 페이지로 분류되며, 풀 라우트 캐싱 과정은 정적 페이지에만 적용된다.
⚠️ 이 때 페이지 유형 구분은 서버 컴포넌트에만 해당된다!
Dynamic Page로 분류되는 경우
1️⃣ 캐시되지 않는 데이터 페칭을 사용할 경우
async function Comp() {
const response = await fetch("...", { cache: "no-store" });
return <div></div>;
}fetch 함수를 사용하여 데이터 페칭 시 cache 옵션을 아예 사용하지 않거나, "no-store"를 적용해 매번 새로운 데이터를 불러올 경우에는 동적 페이지로 분류된다.
2️⃣ 동적 함수(쿠키, 헤더, 쿼리스트링)를 사용할 경우
import cookies from 'next/headers';
async function Comp() {
const cookieStore = cookies();
const theme = cookieStore.get("theme");
return <div></div>;
}위 코드에서처럼 접속 요청에 포함된 쿠키 값을 사용하기 위해 동적 함수를 사용하고 있다면, 이 컴포넌트를 포함하는 페이지는 동적 페이지로 설정된다. 이 외에도 헤더를 위한 headers, 쿼리를 사용하기 위한 searchParams 등이 있다.
그럼 Static Page는?
Dynamic Page가 아니라면 모두 Static Page가 된다!
동적 함수와 데이터 캐시 유무에 따라 페이지를 분류하면 위와 같다.
따라서 마지막 행에 있는 Static Page에만 풀 라우트 캐시가 적용된다.
풀라우트 캐시도 Revalidate가 가능하다
revalidate를 적용한 페이지가 지정한 시간이 지나서 STALE(상한 상태)이 될 경우,
1️⃣ 일단 STALE이라고 띄운 후 캐싱된 페이지를 먼저 응답해주고
2️⃣ 서버 측에서 최신 데이터를 불러와 데이터 캐시를 갱신한다.
3️⃣ 페이지를 렌더링해서 풀 라우트 캐시의 값도 업데이트함으로써, 풀 라우트 캐시에 보관된 값을 최신화시킨다.
4️⃣ 이후의 요청들에 대해서는 최신화된 풀 라우트 캐시의 값을 반환한다.
💡 마치 페이지 라우터의 ISR 방식과 같다는 점!
Reference
👩🏻🏫 한입 크기로 잘라 먹는 Next.js(15+) https://www.inflearn.com/course/한입-크기-nextjs/
