Troubleshooting changes not reflecting in live website for Next JS + Sanity project

Based on your issue, the problem is likely that you have multiple caching layers working against each other. Even though you've set revalidate: 10, you're probably still using the Sanity CDN (useCdn: true) in your client configuration, which can serve cached content independently of your Next.js ISR settings.

Here's what's happening: When Next.js revalidates and fetches "fresh" data from Sanity, the Sanity CDN may still serve cached content from its own cache layer. This means your ISR revalidation is working, but it's just fetching stale data from Sanity's CDN.

The Solution

In your Sanity client configuration, set useCdn: false for production queries:

import { createClient } from 'next-sanity'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2023-01-01',
  useCdn: false, // Critical: disable Sanity's CDN for ISR
})

Or if you're using the getClient() pattern, make sure it's configured properly:

export function getClient(preview) {
  return createClient({
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
    apiVersion: '2023-01-01',
    useCdn: false, // Disable for production to work with ISR
    token: preview ? process.env.SANITY_API_TOKEN : undefined,
  })
}

Why This Works

As explained in the ISR documentation, when using ISR with external APIs that have their own CDN (like Sanity), it's recommended to disable the external CDN (useCdn: false) to ensure fresh data during revalidation. The Sanity CDN and Next.js ISR can work at cross-purposes, potentially serving stale data. By setting useCdn: false, you query Sanity's API directly, ensuring you get the latest published content during revalidation.

Alternative: On-Demand Revalidation

For instant updates (like fixing typos in those thank you/error messages), consider implementing on-demand ISR with webhooks. This triggers revalidation immediately when content changes in Sanity:

1. Create an API route in Next.js:

// pages/api/revalidate.js
export default async function handler(req, res) {
  // Validate the request (check for a secret token)
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid token' })
  }

  try {
    await res.revalidate('/your-page-path')
    return res.json({ revalidated: true })
  } catch (err) {
    return res.status(500).send('Error revalidating')
  }
}

2. Set up a webhook in Sanity Studio to call this endpoint when documents change

Modern Alternative: Sanity Functions

Even better than webhooks, you could use Sanity Functions which provide serverless compute directly within Sanity. Functions can listen to document changes and trigger your revalidation endpoint without needing external webhook infrastructure. This is the modern, recommended approach for reacting to content changes.

This gives you both the performance benefits of static generation and instant content updates when needed. The useCdn: false change should fix your immediate issue, while on-demand revalidation (via webhooks or Functions) provides instant updates for critical content changes.