캐시 무효화
revalidatePath·revalidateTag·CDN purge
가격을 고친 뒤 고객이 새 가격을 보려면
User와 DB 사이에는 캐시가 여러 겹 있다. 순서로 표현하면
- 브라우저 캐시: User 브라우저가 들고 있는 응답.
- Router Cache: Next가 클라이언트 메모리에 들고 있는 RSC 결과
- CDN 엣지 캐시: Vercel이나 CloudFront 같은 CDN이 보관하는 응답. 예로
/api/catalog/*에 걸린 5분 캐시가 있음. - Next 서버 캐시 : Full Route Cache와 Data Cache. fetch 결과와 렌더링된 페이지가 여기 저장
- DB: 원본 데이터
가격을 수정하는 서버 액션은 5번만 변경. 그러므로 그 위에 있는 4,3,2번은 각각 따로 걷어내야한다.
- 4번은
revalidatePath나revalidateTag로 지운다. - 3번은 CDN purge를 하거나 캐시 시간을 짧게 잡습니다.
- 2번은 서버 액션 안에서 revalidate를 호출하면 그 액션을 실행한 사람의 화면에 한해 같이 갱신
결론은 안쪽부터 바깥쪽 순서로, DB -> Next 캐시 -> CDN 순서로 지워야한다.
CDN을 먼저 지우게되면 CDN이 아직 갱신되지 않은 Next 캐시에서 옛 가격을 다시 받아와 저장할 수 있다.
revalidatePath와 revalidateTag는 각각 무엇을 무효화하나 — 경로 단위인가, 임의로 붙인 태그 단위인가
revalidatePath('/products/[id]', 'page')는 경로 단위이다. 해당 페이지나 레이아웃의 캐시를 무효화.revalidateTag('catalog', 'max')는 태그 단위. 내가 붙인 태그를 가진 데이터를 무효화하며, 어느 페이지에서 쓰였는지는 상관 없음.
비유로 하자면 path는 해당 장소, tag는 빨간 스티커 붙인곳
가격 처럼 여러 페이지에 흩어져 있으면 tag 가 더 잘 맞음
서버 액션에서 revalidatePath를 호출하면 그 순간 무슨 일이 일어나나 — 즉시 재생성인가, 다음 요청 시 재생성인가
즉시 재생성 되지 않는다. 호출 시점에는 stale 표시만 해두고, 실제 재생성은 그 다음요청 시 재생성 된다.
Next.js 16기준으로 revalidateTag는 두 번째 인자가 필수.max 프로필을 쓰면 다음 요청은 일단 옛 데이터를 받고, 그 사이 백그라운드에서 새 데이터를 만든다.
이방식이 항상 얘기했던 stale-while-revalidate.
Next의 캐시를 무효화해도 CDN 엣지에 남아 있는 캐시는 그대로일 수 있다. 이 둘이 별개인 이유는 뭔가
그 둘을
