Sanity CMS data changes not reflecting without rebuild or hard refresh

Hey! This is a common issue when building with Next.js and Sanity. The problem you're experiencing is due to Next.js caching your data. By default, Next.js caches fetch requests and data aggressively, so your content stays "frozen" until you rebuild or force refresh.

Here are the solutions depending on your Next.js version:

If you're using Next.js App Router (13+)

The best approach is to add cache revalidation to your data fetching. You have two main options:

Option 1: Time-based revalidation - Content refreshes after a set time period:

export default async function Home() {
  const query = groq`*[_type=="post"]`;
  const posts = await client.fetch(query, {}, { next: { revalidate: 60 } }); // Revalidates every 60 seconds
  return <Posts data={posts}/>;
}

Option 2: Use sanityFetch from next-sanity (recommended):

import { sanityFetch } from '@/sanity/lib/client';

export default async function Home() {
  const query = groq`*[_type=="post"]`;
  const posts = await sanityFetch({
    query,
    revalidate: 60, // or use tags for more control
  });
  return <Posts data={posts}/>;
}

Option 3: Tag-based revalidation (most powerful) - This lets you invalidate specific content when it changes:

const posts = await sanityFetch({
  query,
  tags: ['post'], // Tag this query
});

Then set up an API route to revalidate when content changes (triggered by a webhook from Sanity):

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { 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 });
}

If you're using Pages Router (Next.js 12 or earlier)

Use Incremental Static Regeneration (ISR) with the revalidate option:

export async function getStaticProps() {
  const query = groq`*[_type=="post"]`;
  const posts = await client.fetch(query);
  
  return {
    props: { posts },
    revalidate: 60, // Regenerate page every 60 seconds
  };
}

Quick fix for development

If you just want to see changes immediately during development, you can disable caching:

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

Important note: Don't use cache: 'no-store' in production unless absolutely necessary, as it will hurt performance by fetching fresh data on every request.

The tag-based revalidation approach is generally the most elegant solution for production sites because it gives you instant updates when content changes while still maintaining excellent performance through caching.