[🤖] Next.js App Router 캐싱 전략: 데이터 재검증 (revalidatePath, revalidateTag) 완벽 가이드

Next.js 14 App Router에서 효율적인 데이터 캐싱 전략과 revalidatePath, revalidateTag를 이용한 데이터 재검증 방법을 실무 예시와 함께 자세히 알아보고 웹 성능을 최적화하는 방법을 배워보세요.

게시일: 2026-03-16

수정일: 2026-03-16

16분

단어: 1,512개

정보
🤖 이 포스팅은 Gemini 2.5 Flash AI가 작성했어요. 내용의 정확성을 위해 검토를 거쳤지만, 실무 적용 전 공식 문서를 함께 참고해 주세요.

유용한 팁
Next.js 14 App Router에서 데이터 캐싱의 핵심 원리를 이해하고, revalidatePath, revalidateTag를 활용한 효과적인 데이터 재검증 전략을 실무 예시와 함께 자세히 다루고 있어요.

Next.js 13부터 도입된 App Router는 기존 Pages Router와는 전혀 다른 데이터 페칭 및 캐싱 전략을 제공해요.
특히 Server Components의 등장과 함께 캐싱 메커니즘이 더욱 복잡해져서 많은 개발자분들이 실무에서 혼란을 겪고 계세요.
새로운 캐싱 전략을 제대로 이해하지 못하면, 예상치 못한 stale data 문제나 비효율적인 네트워크 요청으로 인해 성능 저하가 발생할 수 있답니다.
이 글에서는 App Router의 캐싱 원리를 명확히 이해하고, 데이터를 최신 상태로 유지하기 위한 필수적인 재검증(Revalidation) 방법에 대해 자세히 알아보려고 해요.

1️⃣ 기존 방식의 한계

Pages Router에서는 getServerSideProps, getStaticProps, getStaticPaths 등을 통해 데이터 페칭과 캐싱을 제어했어요.
getStaticProps의 revalidate 옵션을 사용하거나 res.revalidate를 호출하는 방식으로 ISR(Incremental Static Regeneration)을 구현했죠.
하지만 App Router에서는 이러한 방식이 사라지고, React의 fetch API 확장과 서버 액션(Server Actions)을 통해 캐싱과 재검증을 관리해요.
이 변화는 개발자들에게 더 큰 유연성을 제공하지만, 동시에 어디서 어떻게 캐싱이 발생하는지, 그리고 언제 데이터를 재검증해야 하는지에 대한 새로운 학습이 필요하게 만들었어요.

⚙️ 해결 방법

0️⃣ 핵심 아이디어

Next.js App Router의 캐싱 전략은 크게 3가지 레이어에서 작동해요.

Request Memoization: 동일한 fetch 호출이 한 번의 렌더링 주기 내에서 중복 실행되는 것을 방지해요.
Data Cache (Full Route Cache): fetch 요청의 결과를 서버에 저장해서 동일한 요청에 대해 재사용해요. 이는 SSG/ISR과 유사한 방식으로 동작하며, revalidate 옵션으로 제어할 수 있어요.
Router Cache: 클라이언트 측에서 Soft Navigation 시 이전에 방문했던 라우트의 React Server Components 페이로드(payload)를 캐싱해요.

이 중에서 우리가 중점적으로 다룰 부분은 Data Cache와 이를 무효화하는 **데이터 재검증(Revalidation)**이에요.
Next.js는 fetch 요청에 대해 기본적으로 force-cache 전략을 사용하며, revalidate 옵션을 통해 캐싱 시간을 제어해요.
하지만 데이터가 변경되었을 때 즉시 캐시를 무효화하고 새로운 데이터를 가져와야 할 때가 있죠.
이때 revalidatePath와 revalidateTag 함수를 사용하여 특정 경로(path) 또는 태그(tag)와 연관된 캐시를 수동으로 무효화할 수 있어요.

1️⃣ 적용 방법

1. `fetch` 캐싱 옵션 활용

Next.js는 fetch API를 확장하여 캐싱 동작을 제어할 수 있도록 했어요.
기본적으로 fetch는 캐시를 사용하며, 특정 시간(초 단위) 이후에 재검증하도록 설정할 수 있어요.


async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 } // 1시간마다 데이터 재검증 (ISR과 유사)
  });
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

// 캐시 사용 안 함 (SSR과 유사)
async function getDynamicData() {
  const res = await fetch('https://api.example.com/dynamic', {
    cache: 'no-store' // 이 요청은 캐시하지 않음
  });
  if (!res.ok) throw new Error('Failed to fetch dynamic data');
  return res.json();
}

next: { revalidate: N } 옵션은 N초마다 백그라운드에서 데이터를 재검증하여 stale-while-revalidate 방식으로 동작하게 해요.
cache: 'no-store'는 캐시를 전혀 사용하지 않고 매번 새로운 데이터를 가져오도록 강제해요.

2. `revalidatePath`로 경로 기반 재검증

revalidatePath 함수는 특정 경로와 관련된 모든 캐시를 무효화해요.
주로 데이터가 변경된 후 해당 데이터가 표시되는 페이지의 캐시를 업데이트할 때 사용해요.


'use server'; // Server Action에서 사용

import { revalidatePath } from 'next/cache';

export async function addPost(formData: FormData) {
  const title = formData.get('title');
  const content = formData.get('content');

  // ... 데이터베이스에 게시물 추가 로직 ...
  await new Promise(resolve => setTimeout(resolve, 500)); // DB 작업 시뮬레이션
  console.log('게시물 추가됨:', { title, content });

  // 게시물 목록 페이지의 캐시를 무효화하여 최신 데이터를 가져오도록 함
  revalidatePath('/posts');
}

위 예시에서는 새로운 게시물을 추가한 후 /posts 경로의 캐시를 무효화하여, 사용자가 /posts 페이지에 접근할 때 최신 게시물 목록을 볼 수 있도록 해요.
revalidatePath는 Server Action이나 Route Handler 내부에서 호출되어야 해요.

3. `revalidateTag`로 태그 기반 재검증

revalidateTag 함수는 fetch 요청에 next: { tags: ['tag-name'] } 옵션으로 설정된 특정 태그와 관련된 모든 캐시를 무효화해요.
이는 여러 경로에서 동일한 데이터(예: 특정 사용자 정보, 상품 카테고리)를 공유할 때 유용해요.


// app/posts/[id]/page.tsx 또는 app/components/PostList.tsx
async function getPost(id: string) {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    next: { tags: ['posts'] } // 'posts' 태그를 이 요청에 할당
  });
  if (!res.ok) throw new Error('Failed to fetch post');
  return res.json();
}

// app/users/[id]/page.tsx
async function getUserPosts(userId: string) {
  const res = await fetch(`https://api.example.com/users/${userId}/posts`, {
    next: { tags: ['userPosts', `user-${userId}-posts`] } // 여러 태그 할당 가능
  });
  if (!res.ok) throw new Error('Failed to fetch user posts');
  return res.json();
}

// app/actions.ts (Server Action)
'use server';

import { revalidateTag } from 'next/cache';

export async function updatePost(postId: string, newContent: string) {
  // ... 데이터베이스에서 특정 게시물 업데이트 로직 ...
  await new Promise(resolve => setTimeout(resolve, 500)); // DB 작업 시뮬레이션
  console.log('게시물 업데이트됨:', { postId, newContent });

  // 'posts' 태그가 있는 모든 fetch 요청의 캐시를 무효화
  revalidateTag('posts');

  // 만약 특정 사용자 게시물만 업데이트되었다면 해당 사용자 태그만 무효화
  // revalidateTag(`user-${userId}-posts`);
}

revalidateTag는 데이터베이스의 특정 테이블이나 컬렉션과 같이 논리적으로 묶인 데이터 그룹의 캐시를 관리하는 데 강력한 도구예요.
데이터가 변경되었을 때, 관련 태그만 무효화하면 해당 태그를 사용하는 모든 페이지가 다음 요청 시 최신 데이터를 가져오게 된답니다.

🧪 예시

0️⃣ 코드/설정 예시

게시물 목록과 상세 페이지가 있고, 새로운 게시물을 추가하는 기능을 가정해볼게요.

1. 게시물 목록 페이지 (app/posts/page.tsx)


import Link from 'next/link';

async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { tags: ['posts'], revalidate: 60 } // 'posts' 태그를 할당하고 60초마다 재검증
  });
  if (!res.ok) {
    throw new Error('게시물을 불러오지 못했어요.');
  }
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">게시물 목록</h1>
      <Link href="/posts/new" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 inline-block">
        새 게시물 작성
      </Link>
      <ul className="space-y-2">
        {posts.map((post: any) => (
          <li key={post.id} className="border p-3 rounded shadow-sm">
            <Link href={`/posts/${post.id}`} className="text-lg font-semibold text-blue-600 hover:underline">
              {post.title}
            </Link>
            <p className="text-gray-600">{post.content.substring(0, 100)}...</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

2. 새로운 게시물 작성 페이지 (app/posts/new/page.tsx)


import { redirect } from 'next/navigation';
import { revalidatePath, revalidateTag } from 'next/cache'; // 필요한 함수 임포트

// Server Action 정의
async function createPost(formData: FormData) {
  'use server';

  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  if (!title || !content) {
    console.error('제목과 내용을 모두 입력해야 해요.');
    return;
  }

  // 실제 API 호출 또는 DB 저장 로직
  console.log('새 게시물 저장 중:', { title, content });
  await new Promise(resolve => setTimeout(resolve, 1000)); // 비동기 작업 시뮬레이션

  // 저장 후 캐시 무효화
  revalidateTag('posts'); // 'posts' 태그를 가진 모든 fetch 캐시 무효화
  revalidatePath('/posts'); // '/posts' 경로의 캐시 무효화 (Router Cache 포함)

  redirect('/posts'); // 게시물 목록 페이지로 리다이렉트
}

export default function NewPostPage() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">새 게시물 작성</h1>
      <form action={createPost} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div className="mb-4">
          <label htmlFor="title" className="block text-gray-700 text-sm font-bold mb-2">제목</label>
          <input type="text" id="title" name="title" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required />
        </div>
        <div className="mb-6">
          <label htmlFor="content" className="block text-gray-700 text-sm font-bold mb-2">내용</label>
          <textarea id="content" name="content" rows={5} className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required></textarea>
        </div>
        <div className="flex items-center justify-between">
          <button type="submit" className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            게시물 저장
          </button>
        </div>
      </form>
    </div>
  );
}

1️⃣ 적용 결과

위 예시 코드에서 createPost Server Action이 실행되면 다음과 같은 일들이 발생해요.

데이터 저장: 새로운 게시물이 데이터베이스에 성공적으로 저장돼요.
revalidateTag('posts'): getPosts 함수에서 next: { tags: ['posts'] }로 설정된 모든 fetch 요청의 Data Cache가 무효화돼요.
이는 /posts 페이지뿐만 아니라, 다른 페이지에서 posts 태그를 사용하여 게시물 데이터를 가져오는 모든 곳에서 캐시가 무효화됨을 의미해요.
revalidatePath('/posts'): /posts 경로와 관련된 Router Cache 및 Data Cache가 무효화돼요.
사용자가 /posts 페이지로 리다이렉트되거나 다시 방문할 때, Next.js는 최신 데이터를 다시 페칭하게 돼요.
revalidatePath는 일반적으로 revalidateTag와 함께 사용될 때 더 효과적이에요.
revalidateTag는 데이터 캐시를 무효화하고, revalidatePath는 클라이언트 측의 Router Cache를 무효화하여 즉각적인 UI 업데이트를 보장하는 데 도움을 줘요.

이러한 과정을 통해 사용자는 새로운 게시물이 추가된 최신 게시물 목록을 즉시 확인할 수 있게 되는 것이죠.

📝 정리

0️⃣ 핵심 요약

Next.js App Router의 캐싱 전략은 웹 애플리케이션의 성능을 크게 향상시킬 수 있는 강력한 기능이에요.
fetch API의 next: { revalidate: N } 옵션을 통해 ISR과 유사하게 데이터를 주기적으로 재검증할 수 있고, cache: 'no-store'로 캐싱을 비활성화할 수도 있어요.
데이터가 변경될 때 즉시 캐시를 무효화하여 최신 데이터를 반영하려면, revalidatePath와 revalidateTag를 활용해야 해요.

revalidatePath(path): 특정 경로와 관련된 캐시를 무효화하여, 해당 경로로 접근 시 최신 데이터를 가져오도록 해요.
revalidateTag(tag): fetch 요청에 설정된 특정 태그와 관련된 모든 캐시를 무효화하여, 논리적으로 묶인 데이터 그룹의 일관성을 유지할 수 있도록 도와줘요.

이 두 함수를 Server Action이나 Route Handler 내에서 적절히 사용하여, 사용자에게 항상 최신의 정확한 데이터를 제공하면서도 뛰어난 성능을 유지할 수 있답니다.

1️⃣ 다음 액션

공식 문서 심화 학습: Next.js 공식 문서의 Caching 섹션을 다시 한번 꼼꼼히 읽어보며 각 캐싱 레이어의 동작 방식을 더 깊이 이해해 보세요.
실제 프로젝트 적용: 현재 진행 중인 Next.js App Router 프로젝트에 revalidatePath와 revalidateTag를 적용하여 데이터 변경 후 캐시 무효화가 어떻게 이루어지는지 직접 경험해 보세요.
성능 모니터링: 캐싱 전략 적용 후 웹 성능 지표(Core Web Vitals 등)를 모니터링하여 실제 성능 개선 효과를 측정해 보는 것이 중요해요.

이 글이 Next.js App Router의 캐싱과 재검증 전략을 이해하고 실무에 적용하는 데 큰 도움이 되기를 바라요.

📮 참고

박상은

아무것도 하지 않을 거면 죽어버려.

성공
연관된 포스트가 없어서 랜덤한 포스트로 대체합니다.