How to disable cache in Sanity when useCdn is false but changes not reflected?

7 replies
Last updated: Apr 12, 2024
Hi, all!How do I disable cache?

Changes I make in the studio aren't reflected immediately on the blog.
I've set useCdn to false in the code, and the result of client.config() printout is as follows:


console.log('client: ', client.config());
Log:

client:  {
  apiHost: '<https://api.sanity.io>',
  apiVersion: '2023-03-25',
  useProjectHostname: true,
  stega: { enabled: false },
  projectId: 'seu6wqtr',
  dataset: 'production',
  useCdn: false,
  isDefaultApi: true,
  url: '<https://seu6wqtr.api.sanity.io/v2023-03-25>',
  cdnUrl: '<https://seu6wqtr.apicdn.sanity.io/v2023-03-25>'
}

AI Update

Good news - you've correctly set useCdn: false, which disables Sanity's CDN. However, the caching issue you're experiencing is almost certainly happening on the Next.js side, not Sanity's side.

Next.js has its own aggressive caching system that caches fetch requests by default. Even with useCdn: false, Next.js will still cache the responses from Sanity's API. Here's how to fix it:

Solution 1: Disable Next.js Cache with cache: 'no-store'

When fetching data, add the cache: 'no-store' option:

const data = await client.fetch(query, params, {
  cache: 'no-store'  // This disables Next.js caching
})

Or if you're using the @sanity/client directly:

const data = await client.fetch(query, params, {
  next: { revalidate: 0 }  // Revalidate on every request
})

Solution 2: Use Tag-Based Revalidation (Better for Production)

For a production-ready solution, use Next.js's tag-based revalidation. This lets you keep caching benefits while invalidating specific content when it changes:

// In your fetch
const data = await client.fetch(query, params, {
  next: { tags: ['post', 'author'] }
})

// Create an API route at /app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache'
import { type NextRequest, NextResponse } from 'next/server'

export async function POST(req: NextRequest) {
  const { tags } = await req.json()
  tags.forEach((tag: string) => revalidateTag(tag))
  return NextResponse.json({ revalidated: true })
}

Then set up a webhook in Sanity to call this endpoint when content changes.

Solution 3: Use Live Content API (Modern Approach)

If you're on a recent version of next-sanity, consider using the Live Content API which automatically handles caching and invalidation for you - no manual cache management needed.

Quick Debug Check

In development mode, try adding this to your next.config.js to see cache behavior more clearly:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

The useCdn: false setting you've configured is correct for avoiding Sanity's CDN, but Next.js's own caching is the real culprit here. Start with cache: 'no-store' for immediate relief, then implement proper revalidation for production!

Show original thread
7 replies
I would think it depends on what framework you are using in the frontend for your blog.
My frontend is based on next.js and Vercel.
If you are using the new app router in next js it will automatically cache all your data using force-cache. To get fresh data you have a few options depending on your needs. If the project is small ish it's easy to just add a {cache: "no-store"} direction to your fetch query.
It would look something like this...

....fetch(
groq`*[_type == “project” &amp;&amp; slug.current == $slug][0]`, {}, { cache: "no-store" }
);
}`
Like I said there are other options that you can find from the next app router caching documentation.
Okay, Thank you very much!Let me try it.
user U
this might help
user A
thanks!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?