On demand ISR - disable cache and render updated content for the first request

Question

Environment information Operating System: Platform: linux Arch: x64 Version: #66~20.04.1-Ubuntu SMP Wed Jan 25 09:41:30 UTC 2023 Binaries: Node: 14.17.5 npm: 6.14.14 Yarn: N/A pnpm: N/A Relevant packages: next: 13.1.6 eslint-config-next: 13.1.6 react: 18.2.0 react-dom: 18.2.0

Area(s) of Next.js affected Data fetching (gS(S)P, getInitialProps)

Link to the site that reproduces this issue https://on-demand-isr-no-cache.vercel.app/

To Reproduce Navigate from home page to ssg page - static page Shows Current date (of last build / revalidation) Navigate back to home page Navigate to ssr page Shows current date (latest) Click on the date api request is made which revalidates ssg page - ON DEMAND ISR Navigate back to home page Navigate to ssg Still shows Current date(of last build / revalidation) - not current date after revalidation Describe the Bug After revalidating the page with ON DEMAND ISR, When user hovers the mouse on the to ssg page, api request is made to getStaticProps to get data If the user clicks on the link before the request is completed(usually this is the case) and navigates - he gets the old data(date)

Upon subsequent visits to the page or on reload, content of the static page is updated

Expected Behavior This results in real time data mismatch. User should be navigated to ssg page with revalidated data

How to avoid/disable stale data caching in this scenario?

Code reference

api route

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  await res.revalidate('/ssg');
  res.json({ message: 'SSG Re validated!' })
}

ssg.tsx page

export async function getStaticProps () {
  return { props: { data: [{name: new Date().toString()}] } }
}