How do I revalidate cached data after a mutation in Next.js App Router?

Question

I have a Server Component that lists posts, and a Server Action that creates a post. After creating, the list doesn't show the new post until I hard-refresh.

Accepted Answer

Call `revalidatePath` (or `revalidateTag`) inside the Server Action after the write:

```ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  await db.post.create({ data: { title: String(formData.get('title')) } });
  revalidatePath('/posts');
}
```

When a Server Action revalidates, Next.js sends the fresh RSC payload back in the **same response**, so the list updates without a reload.

For data used on many pages, tag your fetches (`fetch(url, { next: { tags: ['posts'] } })` or `unstable_cache(..., { tags: ['posts'] })`) and call `revalidateTag('posts')`.

1 Answer