Handling caching issues with Sanity data in NextJS app router

import groq from 'groq';

import { Footer } from '@/components/footer';
import { Header } from '@/components/header';
import { type ContentItem, renderComponent } from '@/lib/render';
import { client } from '@/sanity/lib/client';

type DataProps = {
  content: ContentItem[];
};

const pageQuery = groq`*[_type == "page" && slug.current == $slug]`;

async function getData(slug: string) {
  const res = await client.fetch(pageQuery, { slug, next: { revalidate: 1 } });
  if (!res) {
    throw new Error('Failed to fetch data');
  }

  return res[0];
}

export default async function Page() {
  const slug = '/';
  const data: DataProps = await getData(slug);
  console.log('page.tsx data', data);

  return (
    <main className="flex flex-col items-center">
      <Header />
      {data?.content.map(renderComponent)}
      <Footer />
    </main>
  );
}

async function getData(slug: string) {
  const res = await client.fetch(pageQuery, { slug }, { cache: 'no-store' });
  if (!res) {
    throw new Error('Failed to fetch data');
  }

  return res[0];
}