개발 환경에선 잘 보이던 새 글이, 배포 후에는 안보인다. 왜그럴까?
이건 Next.js가 페이지 단위로 캐싱해서,
새로 올라온 데이터를 불러오지 않기 때문이다.
이 캐시를 Full Route Cache라고 부르며,
이번 글에서는 Full Route Cache와 클라이언트 캐시의 차이,
그리고 이를 무효화하는 방법인 revalidatePath, revalidateTag 사용법을 정리해보자.
Full Route Cache란?
Next.js는 빌드 시점에 HTML와 React 구조를 미리 생성해서 저장한다.
이후 요청이 들어오면 이 저장된 HTML을 그대로 서빙해 렌더링 및 데이터 요청을 생략할 수 있다.
- 불필요한 리렌더링/데이터 요청을 방지
- 재검증이 일어나기 전까지 계속 사용됨
라우트 캐시는 클라이언트 캐시입니다
헷갈리기 쉬운데, 라우트 캐시(Router Cache) 는 브라우저 메모리에서 관리되는 클라이언트 측 캐시이다.
- 페이지 간 이동 시, 이전 서버 컴포넌트 페이로드를 재사용해 속도를 향상
- 하지만 새로고침하거나 사이트를 벗어나면 캐시가 초기화 됨
📌 npm run build시, 가능한 모든 정적 경로에 대해 Full Route Cache가 생성되지만,
동적 라우팅(예: /posts/[id]) 경우 어떤 값인지 모르기 때문에 캐시가 만들어지지 않는다.
-> 이 경우에는 요청이 들어올 때마다 렌더링됨
revalidatePath/revalidateTag로 캐시 무효화
Next.js는 캐시를 자동으로 처리하지만,
개발자가 필요시 직접 무효화 할 수도 있다.
이를 온디맨드(On-demand) 캐시 무효화라고 부른다.
revalidatePath()
가장 자주 사용되는 메서드로, 특정 경로의 정적 캐시를 무효화 한다.
특정 경로의 정적 캐시를 무효화 시키는 메서드
import { revalidatePath } from 'next/cache';
revalidatePath('/news'); // /news 페이지 캐시 재검증 요청
revalidatePath('/news', 'layout'); // /news 페이지의 레이아웃까지 재검증
- 두 번째 인자는
'page'(기본값),'layout'중 선택 가능 - "layout"시 해당 페이지와 중첩된 모든 페이지를 무효화할 수 있다.
revalidateTag()
fetch()요청시, 태그를 부여하고 그 태그로 이름을 캐시를 무효화
// fetch 시 태그 지정
const response = await fetch("http://localhost:8080/messages", {
next : {tags : ['msg']}
});
// 서버에서 해당 태그 무효화
import { revalidateTag } from 'next/cache';
revalidateTag('msg');- 여러
fetch요청에 동일한 태그를 지정하면, 한번의revalidateTag()로 해당 태그 모두 무효화 가능
마무리
Next.js의 캐싱은 엄청 똑똑해서, 내가 따라가기 벅차구나
ㅇㅇ