1

I have a NextJS project with many sites that use getStaticProps() in combination with revalidate. As expected, the pages are generated at build time and are rebuilt in the specified interval (verified using a REST client). However, the users never get to see the refreshed version of the page because the browser seems to cache the generated html. In production, the NextJS server generates caching headers as follows: Cache-Control: s-maxage=60, stale-while-revalidate. No matter how long I wait or journey through the page, the browser never requests the updated page. I only get to see the new data when I manually refresh the page - which I cannot ask my users to do on a daily basis. I also tried overwriting the Cache-Control headers to max-age=60, s-maxage=60, stale-while-revalidate=120 using the nginx that sits in front of the NextJS server, but no chance. For links on the page I use import Link from "next/link". Any ideas on this?

tmechsner
  • 31
  • 1
  • 5
  • That's the expected behaviour for ISR, revalidation will only occur when a new page request is made to the server. Client-side page navigation are cached and do not trigger revalidation. Use client-side revalidation if you want fresh data on the client instead. – juliomalves Feb 07 '22 at 21:04
  • nextjs documentation specifies that revalidate is intended for rebuilding of the page, so why do you say that is the expected behavior? the page should rebuild behind the scene and update on the client side as the documentation say – mohas Nov 23 '22 at 10:31

1 Answers1

2

Okay, got it, thanks for the hint. ISR is not meant to work like that. I got it to work in combination with SWR: https://swr.vercel.app/docs/with-nextjs

So I pre-render the pages with SSG to have a good performance and SEO. In addition, the client requests fresh data while the old data is shown, using SWR.

tmechsner
  • 31
  • 1
  • 5