Next.js 15 Fullstack (App Router + Server Actions) · 강의

세밀한 캐시 무효화를 위한 태그 기반 무효화

가져오기 작업에 캐시 태그를 연결하고 변경 작업 후 영향을 받은 데이터만 정확히 무효화하는 방법을 배웁니다.

세밀한 캐시 무효화를 위한 태그 기반 무효화은(는) CoddyKit의 무료 Next.js 15 Fullstack (App Router + Server Actions) 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack (App Router + Server Actions) 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack (App Router + Server Actions) 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Why Tag-Based Invalidation

In Next.js 15, the Data Cache persists fetch results across requests and deployments. The challenge is busting exactly the right entries after a mutation.

Time-based revalidation (revalidate: 60) is coarse and clock-driven.
Path-based (revalidatePath) clears whole route segments.
Tag-based lets you label individual fetches and invalidate just those, no matter which page rendered them.

Tags give you granular, surgical cache busting: update one product, invalidate only the fetches that read that product.

Attaching a Tag to a Fetch

You attach tags through the next.tags option on the extended fetch. Each tag is a plain string you choose.

Here a product list fetch is labelled with two tags: a broad products tag and a specific product-42 tag.

The broad tag invalidates the whole collection.
The specific tag invalidates one item.

async function getProduct(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: ['products', `product-${id}`] },
  });
  if (!res.ok) throw new Error('Failed to load product');
  return res.json();
}

Invalidating with revalidateTag

After a mutation, call revalidateTag(tag) from next/cache. Every cached fetch carrying that tag is marked stale; the next request re-fetches fresh data.

This runs inside a Server Action or a Route Handler — server-only contexts where mutations happen.

revalidateTag does not return a promise you await for re-fetching; it just marks entries stale.
Multiple tags? Call it once per tag.

'use server';
import { revalidateTag } from 'next/cache';

export async function updateProduct(id: string, data: FormData) {
  await fetch(`https://api.shop.com/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ name: data.get('name') }),
  });
  // Bust only this product's cached reads
  revalidateTag(`product-${id}`);
}

Broad vs Narrow Tags

Design a small tag hierarchy so you can choose the right blast radius:

products — invalidate the whole catalog (e.g. after a bulk import).
product-42 — invalidate a single item (e.g. an edit).
product-42-reviews — invalidate a related slice without touching the product itself.

Rule of thumb: tag each fetch with both a collection tag and an entity tag. Then mutations can pick the smallest tag that covers the change.

Tagging Reads Across Pages

A tag is global to the Data Cache, not tied to a route. If the home page and the detail page both fetch product-42 with the same tag, one revalidateTag('product-42') busts both.

This is the key advantage over revalidatePath: you don't have to know which pages consumed the data.

// app/page.tsx (home) and app/products/[id]/page.tsx both call this
export async function getProductSummary(id: string) {
  const res = await fetch(`https://api.shop.com/products/${id}`, {
    next: { tags: [`product-${id}`] },
  });
  return res.json();
}

unstable_cache for Non-fetch Data

Not all data comes from fetch — direct DB queries (Prisma, Drizzle) bypass the Data Cache. Wrap them with unstable_cache to gain tag support.

The third argument takes tags and revalidate. The same revalidateTag call busts these entries too.

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export const getCachedUser = unstable_cache(
  async (id: string) => db.user.findUnique({ where: { id } }),
  ['user-by-id'],
  { tags: ['users'], revalidate: 3600 },
);

Dynamic Tags in unstable_cache

The cache key parts (second arg) must be static enough to identify the function, but you often want a per-entity tag. Build the tag from the argument and pass it in the options.

Return the function so each call gets the right entity tag, enabling revalidateTag('user-7') precision.

import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

export function getCachedUser(id: string) {
  return unstable_cache(
    async () => db.user.findUnique({ where: { id } }),
    ['user', id],
    { tags: [`user-${id}`, 'users'] },
  )();
}

Building Tag Names Safely

Inconsistent tag strings silently fail — a mismatched tag busts nothing. Centralize tag construction in pure helper functions so reads and writes always agree.

This is standalone, idiomatic TypeScript: the helpers produce the exact same strings used in both next.tags and revalidateTag.

const tags = {
  products: () => 'products',
  product: (id: string) => `product-${id}`,
  productReviews: (id: string) => `product-${id}-reviews`,
};

console.log(tags.products());
console.log(tags.product('42'));
console.log(tags.productReviews('42'));

Invalidating Multiple Tags Atomically

One mutation often affects several cached slices. After updating a product you may need to bust the item, the collection listing, and the search index.

Call revalidateTag for each. They all take effect together before the action's response returns to the client.

Order doesn't matter — all are marked stale.
Keep the set minimal to avoid over-fetching elsewhere.

'use server';
import { revalidateTag } from 'next/cache';

export async function publishProduct(id: string) {
  await fetch(`https://api.shop.com/products/${id}/publish`, { method: 'POST' });
  revalidateTag(`product-${id}`);
  revalidateTag('products');
  revalidateTag('search-index');
}

Tag vs Path: Choosing

Both revalidateTag and revalidatePath exist for different jobs:

Use tags when the same data appears on many routes, or when you only want to bust data (not the rendered route cache assumptions of a layout).
Use path when an entire route's output changed and you don't track tags there.

They compose: a Server Action can call both. Prefer tags for data, paths for whole-page structural changes.

End-to-End in a Server Action

Here is the full loop: a form posts to a Server Action, the action mutates the backend, then invalidates the precise tags. The next render of any page reading those tags gets fresh data automatically.

Note we bust both the entity tag and the collection tag because the edit changes the listing too.

'use server';
import { revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';

export async function editProduct(id: string, formData: FormData) {
  await fetch(`https://api.shop.com/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify({ name: formData.get('name') }),
    headers: { 'Content-Type': 'application/json' },
  });
  revalidateTag(`product-${id}`);
  revalidateTag('products');
  redirect(`/products/${id}`);
}

Quick Check

A product detail fetch is tagged ['products', 'product-42'] and is also shown on the home page list (same tag). You edit only product 42's name. What is the most precise way to refresh both views without over-invalidating other products?

Recap

You learned granular, tag-based cache busting in Next.js 15:

Attach tags via next: { tags: [...] } on fetch, and via the tags option of unstable_cache for non-fetch data.
Use a collection tag plus a per-entity tag so mutations pick the smallest blast radius.
Call revalidateTag(tag) inside Server Actions or Route Handlers — once per tag, atomically.
Tags are global: one call refreshes the data on every route that read it, unlike revalidatePath.
Centralize tag strings in helpers so reads and writes never drift apart.

자주 묻는 질문

“세밀한 캐시 무효화를 위한 태그 기반 무효화” 강의는 무료인가요?

네 — “세밀한 캐시 무효화를 위한 태그 기반 무효화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack (App Router + Server Actions) 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack (App Router + Server Actions) 강의에는 총 4개의 강의가 포함되어 있습니다.

“세밀한 캐시 무효화를 위한 태그 기반 무효화”에서 뭘 배우나요?

가져오기 작업에 캐시 태그를 연결하고 변경 작업 후 영향을 받은 데이터만 정확히 무효화하는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack (App Router + Server Actions)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack (App Router + Server Actions)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack (App Router + Server Actions)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“세밀한 캐시 무효화를 위한 태그 기반 무효화” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Next.js 15 Fullstack (App Router + Server Actions) 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Next.js 15 Fullstack (App Router + Server Actions) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Next.js 15 Fullstack (App Router + Server Actions)(으)로 돌아가기