On-Demand Revalidation

~22 min · revalidatePath, revalidateTag, Server Actions

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

왜 on-demand

Time-based ISR 은 사용자가 revalidate window 전체 동안 stale data 보일 수도 있음. On-demand revalidation 이 mutation 도착하는 순간 cache invalidate — content 바꾼 editor 가 바로 새 version 봄.

Function 둘, scope 둘

Function	Invalidate
`revalidatePath(path, type?)`	특정 path. `type` 이 `'page'` (leaf 만) 또는 `'layout'` (그 아래 전부)
`revalidateTag(tag)`	`fetch(url, { next: { tags } })` 로 `tag` 붙인 모든 fetch

어디서 부를 수 있는지

Server Action 과 Route Handler 만. v15 가 strict 하게 함; render 동안 부르면 throw. 이유: invalidation 이 mutation 의 side effect, pure rendering 의 거 아님.

Code

Mutation 후 path invalidate·tsx

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';

export async function publishPost(formData: FormData) {
  const title = formData.get('title') as string;
  const slug = await db.post.create({ data: { title } });

  revalidatePath('/blog');                     // listing
  revalidatePath(`/blog/${slug}`, 'page');     // 특정 post
  revalidatePath('/blog', 'layout');           // /blog 아래 전부
}

Tag-based invalidation·tsx

// Fetch 안:
const posts = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
}).then(r => r.json());

// Action 안:
import { revalidateTag } from 'next/cache';

export async function createPost(formData: FormData) {
  'use server';
  await db.post.create({ data: {/* … */} });
  revalidateTag('posts'); // 'posts' tag 모든 fetch invalidate
}

External links

Exercise

Post update 하고 revalidatePath 부르는 Server Action 추가. Listing page 가 time-based interval 안 기다리고 다음 request 에서 새 값 보이는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousTime-Based Revalidation (ISR)Next →Static vs Dynamic Detection

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.