Next Js getStaticProps and Dato CMS Cache Tags

Hi!

Is it possible to use Dato CMS Cache with getStaticProps from Next 13 and Pages Router?

I use getStaticPaths on ‘fallback: blocking’ and I would need to purge the cache for certain pages hosted on Netlify.

Many thanks!

Hey @orionlight231, welcome to the Dato forums and thanks for the great question!

Unfortunately, this isn’t something we support out-of-the-box because Next doesn’t (as far as I know) offer a simple revalidateTag() equivalent for the Pages router. Normally, they recommend using ISR with time-based revalidations instead, which should work fine for smaller sites (you’re still drastically reducing requests from 1 per visitor to 1 per X seconds).

If you really want to try to shim in tag-based revalidations instead, MAYBE you can do it with some manual mapping…? I haven’t actually tried to implement this, but just thinking it through hypothetically:

  • The Pages router does offer on-demand revalidation of paths (like /blog/post-1)
  • You can manually request our cache tags with any GraphQL request
  • The tricky part is that you’d have to create some external mapping of cache tags to page paths, maybe in a Netlify Blob or Cloudflare Workers KV or Vercel KV or similar, and use that to look up all the corresponding paths for any given tag. For example, any time you make a GraphQL call, you’d also save an entry into this KV mapping, for each cache tag, of the page’s final path. Then, on a DatoCMS invalidation webhook, you’d send it to some API route/serverless func to then look up that cache tag in your KV and then invalidate all the corresponding paths.

I think that’s a pretty complicated and fragile solution, though, and it’s also kinda reinventing what Next’s App Router does anyway, which tracks all of that internally with your fetch()es. Personally, I’d be wary of doing it this way because of the mental gymnastics it creates… I think either using the standard time-based revalidation or else porting the app over to the App Router would be more maintainable long-term.

I’m sorry I don’t have better news for you :frowning: I hope the above thoughts provide some nuance, at least? This might also be a good question to ask of Vercel support (or Next community forums, etc.), because it’s more generally a question about tag-based revalidation in the Pages router and not just DatoCMS.

What do you think?

I found this library on NPM implementing something similar, by the way: https://www.npmjs.com/package/next-cache-tags

Looks like by default it uses Redis but could be adapted to other KV stores. Might be worth taking a look at the code and/or reaching to the author to see if be adapted for use in your use case? GitHub - lucasconstantino/next-cache-tags: Active ISR revalidation based on surrogate keys for Next.js

Thank you @roger! I will try to follow your suggestions