Revalidation and refresh

After a Server Action mutates data, the cached page that shows that data is now stale. Next.js gives you two ways to invalidate: revalidatePath for a specific URL, and revalidateTag for a named cache group. Call them inside the action and the next request rebuilds with fresh data.

app/actions.ts

tsx

'use server';

import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';
import { books } from '@/lib/schema';

export async function createBook(formData: FormData) {
  const title = formData.get('title') as string;
  const author = formData.get('author') as string;

  await db.insert(books).values({ title, author });
  revalidatePath('/books');
}

Mutate, then invalidate the cache for the list page.

revalidatePath is the simple answer: pass a URL and everything cached for that path is rebuilt. revalidateTag is more flexible: you tag your fetch calls with a string, and calling revalidateTag invalidates every fetch with that tag across the whole app. Reach for tags when one mutation needs to invalidate several unrelated pages.

Quiz: Quiz

Loading practice…

Checkpoint: Server Actions checkpoint

Loading practice…