Fetch data cache not clearing when using revalidateTag

[barren inlet]

I'm using the data cache and passing tags to the fetch call. In an API route handler I call revalidateTag to clear tags associated with those fetch requests. However, locally, I'm not seeing new data come through. Where should I start with checking what I'm doing wrong? I don't know if the same behaviour happens in Vercel as I haven't tested that yet.

[obtuse wave]

Hi @barren inlet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

There could be several reasons why you're not seeing new data come through after calling revalidateTag. Here are some things you can check:

1. Check your fetch request: Make sure you're correctly tagging your fetch requests. The tags should be passed in the next option of the fetch request like this:

fetch('<https://...',> { next: { tags: ['your-tag'] } })

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/caching))

2. Check your revalidateTag call: Ensure that you're correctly calling revalidateTag with the correct tag. The tag passed to revalidateTag should match the one used in your fetch request.

revalidateTag('your-tag')

(Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/functions/revalidateTag))

3. Check your Route Handler: If you're using a Route Handler, make sure you're correctly handling the request and response. The revalidateTag function should be called with the correct tag, and the response should be handled correctly. Here's an example:

import { NextRequest, NextResponse } from 'next/server'
import { revalidateTag } from 'next/cache'
 
export async function GET(request: NextRequest) {
 const tag = request.nextUrl.searchParams.get('tag')
 revalidateTag(tag)
 return NextResponse.json({ revalidated: true, now: Date.now() })
}

(Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/functions/revalidateTag))

4. Understand Cache Interactions: It's important to understand that revalidating the Data Cache in a Route Handler will not immediately invalidate the Router Cache as the Router Handler isn't tied to a specific route. This means Router Cache will continue to serve the previous payload until a hard refresh, or the automatic invalidation period has elapsed. To immediately invalidate the Data Cache and Router cache, you can use revalidatePath or revalidateTag in a Server Action.
   (Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/caching))

5. Check your local environment: If you're testing this locally, make sure your local environment is correctly set up to handle caching and revalidation. The default cache handler in Next.js uses the filesystem cache, which requires no configuration. However, if you've customized the cache handler using the incrementalCacheHandlerPath field in next.config.js, make sure it's correctly implemented.
   (Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/next-config-js/incrementalCacheHandlerPath))

If you've checked all these points and you're still not seeing new data, it might be helpful to test your application in a production-like environment, such as Vercel, to see if the issue persists there.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: