Tag, then invalidateTag, then invalidate

Save, then refresh

Change the price, save, then refresh each side.

// lib/products.ts
import { cacheTag } from 'next/cache'

export async function getProduct(id: string) {
  'use cache'
  cacheTag('products', `product-${id}`)
  return db.products.findUnique({ where: { id } })
}

// app/products/[id]/actions.ts
'use server'
import { updateTag } from 'next/cache'
import { redirect } from 'next/navigation'

export async function updateProduct(id: string, data: FormData) {
  await db.products.update({ where: { id }, data })
  updateTag(`product-${id}`)
  redirect(`/products/${id}`)
}

Blast radius of one edit

Hover to preview; tap or click to add $5.

async function getProducts() {
  'use cache'
  const items = await db.products.findMany()
  // The list shows every item, so it carries every item's tag too.
  cacheTag('products', ...items.map((p) => `product-${p.id}`))
  return items
}

async function getProduct(id: string) {
  'use cache'
  cacheTag('products', `product-${id}`)
  return db.products.findUnique({ where: { id } })
}

Type the invalidation call

Type a call or pick an example.

'use server'
import { revalidateTag, updateTag } from 'next/cache'

export async function createPost(data: FormData) {
  await db.posts.create({ data })
  revalidateTag('posts', 'max')
}

export async function updateProduct(id: string, data: FormData) {
  await db.products.update({ where: { id }, data })
  updateTag(`product-${id}`)
}

Why it matters, pros and cons