Next.js에는 어떤 캐싱 계층이 있나요?

Question

Accepted Answer

App Router에는 함께 작동하는 **여러 캐싱 계층**이 있습니다. 이를 이해하면 데이터가 때때로 오래되어 보이는 이유와 신선도를 제어하는 방법을 알 수 있습니다.

## 네 가지 캐시

```text
1. Request Memoization — 하나의 렌더 패스 내에서 동일한 fetch() 호출을 중복 제거
2. Data Cache          — fetch() 결과를 요청과 배포 간에 영속화 (서버)
3. Full Route Cache    — 정적 라우트의 렌더링된 HTML/RSC를 캐싱 (빌드 시점)
4. Router Cache        — 방문한 라우트의 클라이언트 측 캐시 (브라우저, 세션별)
```

## 1. Request Memoization

```tsx
// 레이아웃과 페이지에서 동일한 fetch → 렌더당 단 하나의 네트워크 요청
const user = await fetch("/api/user"); // 자동으로 중복 제거됨
```

## 2. Data Cache (가장 많이 조정하는 것)

```tsx
fetch(url, { cache: "force-cache" });       // 캐싱됨 (기본값) — SSG와 유사
fetch(url, { cache: "no-store" });          // 절대 캐싱 안 함 — 요청마다 신선함
fetch(url, { next: { revalidate: 60 } });   // 캐싱됨, 60초마다 새로고침 — ISR
fetch(url, { next: { tags: ["posts"] } });  // 온디맨드 무효화를 위해 태그 지정 가능
```

## 3 & 4. 라우트 캐시

**Full Route Cache**는 정적으로 렌더링된 라우트를 저장하고, **Router Cache**는 이전에 방문한 라우트를 브라우저에 보관하여 뒤로/앞으로 가기와 재네비게이션을 즉각적으로 만듭니다.

## 변경 시 캐시 무효화

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

revalidatePath("/blog");        // 특정 라우트의 캐시 무효화
revalidateTag("posts");         // "posts"로 태그된 모든 fetch 무효화
router.refresh();               // (클라이언트) 현재 라우트의 Router Cache 비우기
```

데이터를 생성/수정한 후(흔히 Server Action에서) `revalidatePath`/`revalidateTag`를 호출하여 영향받은 페이지가 다시 페칭되고 사용자가 변경을 보게 합니다.

## 흔한 함정

```text
"업데이트 후 왜 데이터가 오래된 채로 있지?" → 캐시(보통 Data 또는 Router 캐시)가
옛 값을 제공하는 것. 해결: 변경 후 revalidateTag/revalidatePath를 호출하거나,
항상 신선한 데이터에는 cache: "no-store"를 사용.
```

(참고: 캐시 기본값은 Next 버전마다 바뀌었습니다. 일부 최근 버전은 기본적으로 덜 공격적으로 캐싱하므로 버전을 확인하세요.)

## 왜 중요한가

Next.js의 공격적인 다층 캐싱이 그것을 빠르게 만들지만, "왜 내 데이터가 오래됐지?"라는 혼란의 1순위 원인이기도 합니다.

네 계층을 알고, Data Cache를 fetch별로 제어하고(`no-store`/`revalidate`/tags), 변경 후 `revalidatePath`/`revalidateTag`로 무효화하는 것이 성능과 올바른 신선도를 모두 얻는 데 필수적입니다.