DEV Community

Peter Jacxsens
Peter Jacxsens

Posted on

Revalidating cache in NextJs: intro

We've covered 2 caches: data cache and full route cache. In most cases, these need to be updated periodically or at specific intervals. That is what revalidation does: it let's you update the fetch results - data cache - or the statically prerendered routes - full route cache. Note that there are 4 combinations here:

data cache no data cache
Dynamic render data revalidation no revalidation needed
Static render data + route revalidation route revalidation

When performing revalidation, we need to keep these combos in mind. But what does revalidation actually do?

data cache means that the result of a fetch you made was saved. We just talked about the data cache files and what they contained: headers, status, body,... Let's say we made a fetch to our CMS for a blog post with a certain ID. After a while we update this blogpost. However, this did not update our data cache in our app. So the state of our app is no longer up to date with the state of our CMS. Revalidating data cache means that we update the data cache with fresh data. To put it simply, we refetch the data and overwrite the existing cache. How we actually do this is for the next chapter.

Full route cache are all the routes that were statically prerendered at build time. Each route gets .html and .rsc files (and css and js, ...), we covered this in previous chapters. We just updated a blog post. If that blogpost was statically rendered, it's now no longer up to data. Revalidating full route cache means that we regenerate outdated routes. We rerender them into fresh html and rsc.

  • We regenerate -> Regeneration
  • The static routes -> Static Regeneration
  • But only parts, we don't rebuild the whole thing -> Incremental

The process of updating or refreshing the full route cache without rebuilding your entire project (no next build) is called Incremental Static Regeneration (ISR). Whenever we talk about rerendering or updating or refreshing or regenerating a statically rendered route, that is ISR!

Key Takeaway

Once more. We generated the full route cache at build time and started our server (next start). Incremental Static Regeneration is a mechanism that allows to update these prerendered routes, not at build time but at run time. The routes are statically rendered, server-side. We don't rebuild the whole cache, only certain parts (routes). revalidation tells us which parts to regenerate.

Revalidation in Next is updating stale cache. There are 2 types of revalidation:

  1. Time based revalidation
  2. On demand revalidation

These are both mechanisms to update stale cache. They do the same thing but do it differently. We cover this in the next chapters.

If you want to support my writing, you can donate with paypal.

Top comments (0)