cacheTag

Next.JS Use Cache

2 min read

Published Jul 3 2025


4
0
0
0

JavascriptNextJS

In order to clear a specific cache, we first need to tag the data result, then we can call the revalidateTag function to clear any data linked to that tag so that a fresh request to the database will be made next time it is requested.


To tag the function, we use the cacheTag function. We provide this function with a list of 1 or more string values. Any of these string values can be used to revalidate the cache. Eg. in our getCategory function, we could choose to add two tags. One for categories, to clear all category data and one for category:xx, with xx being the category id. This then enables us to clear the cache for every category at once, or the cache for a specific category id. This then enables us to add a revalidateTag function in the update a specific category function to only clear the cache of that category, but also allows us to have a much wider reaching clear all the categories caches admin function for emergencies etc. The tag used can be any single string, but i personally like to use the : to break up the data as i know i wont have a : in the id fields. You could just as easily use a - or a | etc. or have no seperator at all and just have categoryxx.


So to tag the function in our example in the last section we would do:

import config from '@payload-config'
import { getPayload } from 'payload'
import { categories, category_images } from '@/payload-generated-schema'
import { eq } from '@payloadcms/db-postgres/drizzle'
+import { unstable_cacheTag as cacheTag } from 'next/cache'

export const getCategory = async (slug: string) => {
  'use cache'
  const payload = await getPayload({ config })

  const cats = await payload.db.drizzle
    .select({
      id: categories.id,
      slug: categories.slug,
      title: categories.title,
      description: categories.description,
      image: {
        id: category_images.id,
        prefix: category_images.prefix,
        filename: category_images.filename,
        width: category_images.width,
        height: category_images.height,
      },
    })
    .from(categories)
    .leftJoin(category_images, eq(category_images.id, categories.image))
    .where(eq(categories.slug, slug))

+  cacheTag('categories', 'category:' + cats[0].id)

  return cats[0] || undefined
}

This then adds two tags to the function. One for categories and one for category:id.


Then you would call this to clear the cache for all the categories:

import { revalidateTag } from 'next/cache'

export const clearAllCategoriesCache = async () => {
  revalidateTag('categories')
}

And in your update category function you could call something like:

import { revalidateTag } from 'next/cache'

export const updateCategory = async (id: number, data: Object) => {
  // Add actual update code here for the database update the data values etc.
  
  revalidateTag('category:' + id)
}

So now we can cache the data and clear the cache, next is how to choose how long the cache gets saved for in the next section.


Products from our shop

Docker Cheat Sheet - Print at Home Designs

Docker Cheat Sheet - Print at Home Designs

Docker Cheat Sheet Mouse Mat

Docker Cheat Sheet Mouse Mat

Docker Cheat Sheet Travel Mug

Docker Cheat Sheet Travel Mug

Docker Cheat Sheet Mug

Docker Cheat Sheet Mug

Vim Cheat Sheet - Print at Home Designs

Vim Cheat Sheet - Print at Home Designs

Vim Cheat Sheet Mouse Mat

Vim Cheat Sheet Mouse Mat

Vim Cheat Sheet Travel Mug

Vim Cheat Sheet Travel Mug

Vim Cheat Sheet Mug

Vim Cheat Sheet Mug

SimpleSteps.guide branded Travel Mug

SimpleSteps.guide branded Travel Mug

Developer Excuse Javascript - Travel Mug

Developer Excuse Javascript - Travel Mug

Developer Excuse Javascript Embroidered T-Shirt - Dark

Developer Excuse Javascript Embroidered T-Shirt - Dark

Developer Excuse Javascript Embroidered T-Shirt - Light

Developer Excuse Javascript Embroidered T-Shirt - Light

Developer Excuse Javascript Mug - White

Developer Excuse Javascript Mug - White

Developer Excuse Javascript Mug - Black

Developer Excuse Javascript Mug - Black

SimpleSteps.guide branded stainless steel water bottle

SimpleSteps.guide branded stainless steel water bottle

Developer Excuse Javascript Hoodie - Light

Developer Excuse Javascript Hoodie - Light

Developer Excuse Javascript Hoodie - Dark

Developer Excuse Javascript Hoodie - Dark

© 2025 SimpleSteps.guide
AboutFAQPoliciesContact