Sanity cache not updating in Next.js 13 despite useCdn prop changes

This is a common issue with Next.js 13+ App Router and it's actually related to Next.js's aggressive caching behavior, not Sanity itself. The useCdn prop won't help here because Next.js is caching your data on the server side.

Here are the solutions that work with Next.js 13 and the App Router:

Option 1: Disable caching per fetch (recommended for development) Add { cache: 'no-store' } to your Sanity client fetches:

const data = await client.fetch(query, params, { cache: 'no-store' })

Option 2: Add route segment config (better for production) At the top of your page.tsx or layout.tsx files, add:

export const revalidate = 10; // revalidate every 10 seconds

Or for completely dynamic routes:

export const dynamic = 'force-dynamic';

Option 3: Use the modern sanityFetch helper The next-sanity package provides a sanityFetch helper that's designed specifically for Next.js App Router with built-in cache configuration:

import { sanityFetch } from '@/lib/sanity.fetch'

const posts = await sanityFetch({
  query: POSTS_QUERY,
  tags: ['post'], // enables tag-based revalidation
})

Why this happens: Next.js 13+ App Router caches everything by default for performance. When you query Sanity, Next.js caches the response, so even though Sanity has fresh content, Next.js serves the cached version. The useCdn setting only controls whether Sanity uses its CDN vs API endpoint—it doesn't affect Next.js's own caching layer.

Best practice for production: Use time-based revalidation (export const revalidate = 60) or tag-based revalidation with Sanity webhooks and Next.js revalidateTag for optimal performance while keeping content fresh.