How does revalidate work?

revalidate is a mechanism in Next.js that controls when cached data or pages are considered stale and need to be refreshed.

The simplest way to think of revalidate is as a data freshness timer.

---

#The basic idea

When you set revalidate, you're telling Next.js:

"This data can be considered fresh for N seconds, and then it needs to be refreshed on the server"

While the data is "fresh":

• the server makes no new requests
• the cache is used
• the page is served instantly

Once the data has "gone stale":

• Next.js regenerates the data
• updates the cache
• from then on everyone gets the new version

---

#How revalidate works step by step

1. The first user opens the page
2. Next.js fetches the data and stores the result in the cache
3. The revalidate timer starts
4. While the time hasn't expired:

• all users get the cache

5. Once the time has expired:

• the next request triggers a refresh
• the server fetches the data again
• the cache is replaced with a fresh one

Important: the user doesn't wait for the refresh - they get either the old version or an already-refreshed one

---

#Where revalidate is used

#1. Static pages (Pages Router)

revalidate specifies how often to rebuild the page after the build.

• the page stays static
• it's rebuilt only when needed
• without rebuilding the whole site

---

#2. fetch in the App Router

In modern Next.js, revalidate is applied at the level of a data request, not the whole page.

This means:

• each data fetch has its own cache
• different data can have a different refresh interval
• the page is assembled from "pieces" with different freshness

An example of the logic:

• the product list refreshes once every 60 seconds
• the category description refreshes once every 10 minutes
• the site header, almost never

---

#What happens technically

Simplifying a lot:

• revalidate = 0 -> caching is off, data is always fresh
• revalidate = 60 -> data refreshes at most once a minute
• revalidate = 3600 -> data refreshes once an hour

Next.js itself decides:

• when to use the cache
• when to make a new request
• when to update the HTML

---

#Why revalidate is useful

revalidate lets you:

• avoid making a request on every visit
• keep the speed of static pages
• while not keeping the data "frozen"

This matters especially for:

• blogs
• catalogs
• news pages
• large sites with frequently changing content

---

#An important limitation

revalidate:

• isn't suited for personal data
• doesn't guarantee a "second-by-second" refresh
• works great for public content

If data must be always up to date, you need server-side rendering on every request.

---

#In short

revalidate is:

• the cache's lifetime
• control over how often data refreshes
• the basis of ISR in Next.js

It lets you find a balance between speed, freshness, and server load.