🧠 Next.js에서 반드시 알아야 할 4가지 캐싱 전략

🏗 캐시 전략을 알아야 하는 이유

Next.js는 app router 기반 프로젝트에서 기본적으로 fetch와 page rendering을 SSR(Server Side Rendering) 또는 SSG(Static Site Generation) 방식으로 처리합니다. 여기서 캐시 전략을 어떻게 쓰느냐에 따라 페이지의 성능, 사용자 경험, SEO가 좌우됩니다.

---

🧩 캐싱 전략 ① Request Cache (요청 캐시)

동일한 fetch 요청은 한 번만 처리하고, 이후에는 결과를 재사용합니다.

✅ 특징

• 같은 fetch 요청이 여러 번 있어도, 한 번만 네트워크 요청이 발생
• 메모리 캐시 기반 (서버에서만 작동)
• 서버리스 환경에서는 인스턴스 간 캐시 공유 안 됨

✅ 예시 코드

const A = async () => await fetch('/api/workspace');
const B = async () => await fetch('/api/workspace'); 
// 같은 요청, 한 번만 요청됨

❗️주의사항

• URL, 쿼리, 헤더 등이 모두 일치해야 캐싱됩니다.
• 과도한 캐시는 메모리 문제를 유발할 수 있음

🔧 캐시 무효화 방법

await fetch('/api/data', {
  next: { cache: 'no-store' }
});

---

🧱 캐싱 전략 ② Build-time Cache (빌드 타임 캐시)

next build 시점에 fetch를 실행하고, 정적으로 캐싱합니다.

✅ 특징

• 빌드 시 데이터가 고정
• 실제 배포 환경에서는 auto 캐시 정책이지만, 정적 fetch는 force-cache처럼 동작

😨 문제가 생기는 시나리오

const TodoListPage = async () => {
  const todos = await getTodoList();
  return (
    <ul>
      {todos.map((todo, i) => <li key={i}>{todo}</li>)}
    </ul>
  );
}

const CreateTodoPage = () => {
  const onSaveTodo = async () => {
    await saveTodo();
    router.push('/todo-list');
  }

  return <button onClick={onSaveTodo}>생성</button>;
}

🛠 해결 방법

1. no-store 사용 (항상 최신 데이터)
2. revalidateTag로 특정 캐시 무효화

await fetch('/api/todos', {
  next: { tags: ['todos'] }
});

revalidateTag('todos');

---

📦 캐싱 전략 ③ Page Cache (페이지 캐시)

유저가 방문한 페이지를 캐싱하여 다음 요청 시 빠르게 응답합니다.

✅ 특징

• 요청 시 SSR 결과를 저장
• 이후 같은 요청이 오면 캐시로 응답
• ISR 기반으로 작동함

비교 항목	Build-time Cache	Page Cache
생성 시점	빌드 시	요청 시
갱신 시점	ISR 또는 재배포	조건에 따라 무효화 가능
사용 사례	마케팅 페이지	로그인 후 대시보드

---

🚀 캐싱 전략 ④ Prefetch Cache (사전 로딩 캐시)

유저가 아직 클릭하지 않은 링크에 대해 백그라운드에서 미리 데이터를 가져옵니다.

✅ 작동 원리

• <Link>는 정적 경로에 대해 자동 prefetch
• Intersection Observer로 뷰포트 내에서만 작동
• 브라우저 캐시 활용

<Link href="/about">About</Link>
<Link href="/about" prefetch={false}>About</Link>

---

💡 성능을 위해 캐시 전략을 더 잘 쓰는 팁

1. fetch는 props 전달 대신, 하위 컴포넌트에서 다시 호출

const Parent = () => <Child />
const Child = async () => {
  const data = await fetchData();
}

---

2. Client Component는 꼭 필요한 경우만 사용

const Page = () => <ModalButton />

---

3. 서버에서 fetch 후 클라이언트에 전달

const Server = async () => {
  const data = await fetchData();
  return <Client data={data} />
}

---

📚 참고 자료

• 공식 문서: Next.js Data Fetching and Caching

---

🗂 Words

단어	뜻	발음
Cache	저장된 데이터	[kæʃ]
Prefetch	사전 로딩	[priːˈfetʃ]
Revalidate	재검증하다	[ˌriːˈvælɪdeɪt]
Tag	태그 (분류 단위)	[tæɡ]
Observer	관찰자	[əbˈzɜːrvər]

---

📢 함께 보면 좋은 소식

🧪 링크 드라퍼, 지금 베타 테스트 중입니다

링크 드라퍼는 링크를 저장하고,
정리하고,
다시 꺼내보게 만들어주는 서비스입니다.

• 📎 폴더별 링크 정리
• ✨ OG 이미지 자동 추출
• 🧠 공유 URL 생성 및 게시 기능
• ⚡ 크롬 익스텐션 원클릭 저장

👉 링크 드라퍼 베타 체험하러 가기
👉 크롬 웹스토어에서 설치하기

---

💬 카카오톡 채널 추가하고 소식 받기

• 서비스 업데이트
• 기능 꿀팁
  카카오톡 채널을 통해 빠르게 받아보세요!

👉 카카오톡 채널 추가하기