How to revalidate the data cache on deployment
I'm building my SSG website with Sanity headless cms and have set up webhook to trigger a redeployment on new content being published so it would generate a new pages with updated content.
The problem: When I leave the fetch request by default, the data is cached across deployments so it would use the data from the last deployment instead of the newly updated data. So I added cache: no-store to the fetch option but that made it so that the page become dynamic and would fetch the new data before it's ready for production and erroring out, moreover I'd like the pages to be SSG so that's wouldn't help.
What I've tried: I've been crawling through this guide https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config but most of it just essentially impose 1 caching strategy on every fetch request on a layout or page
Thanks in advance
File Conventions: Route Segment Config | Next.js
Learn about how to configure options for Next.js route segments.
2 Replies
I believe what you are looking for is some kind of ISR behavior. Where the page is statically generated at build time, but you can set some revalidation intervals to regenerate the page in the background to display the most up-to-date information. To enable ISR, check out this docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating
Data Fetching: Fetching, Caching, and Revalidating | Next.js
Learn how to fetch, cache, and revalidate data in your Next.js application.
Thanks I’m changing the work flow so that instead of calling webhook to redeploy the site, sanity will call a custom
Route handler that use revalidateTag on the sites