How does the revalidate process in Incremental Static Regeneration work?

Question

I have a question about the Incremental Static Regeneration. As far as I know the revalidate value within the getStaticProps() function tells Next.js the amount of time it should rebuild the pages.

My question about that is, will this happen for every user/request after the set amount of time, or centralized, starting with the first user/request hitting the page?

---

For example:

Revalidate value in the getStaticProps() function: 60 seconds

User A hits the page and receives a cached version. After 60 seconds Next.js rebuilds the pages for him and serves the fresh content.

User B hits the page shortly after User A, receives a cached version and after 60 seconds he also receives an updated version.

---

My concern is that every individual request starts it's own 60-second interval to rebuild.

I'm quite sure that's not the case, but as Next.js is new to me, I wanted to get this straight before messing things up.

I would be very thankful if somebody could volunteer to give a quick response.

Inextirpable

vercel.com/docs/concepts/next.js/… – Leavings

Answer 1

Incremental static generation is Inspired by stale-while-revalidate, so there are no intervals.
Lets say that our revalidate value is 60 seconds :

• first user will visit the page at 100000000000 (random time in milliseconds)
• next.js will cache the page with an expiry date of 100000060000
• other user comes at 100000040000, cache is valid, doing nothing (serving cached page)
• another visitor come at 100000070000, cache is expired, next.js will revalidate the page in the background,but the user still see the old page.
• last visitor comes at 100000080000 and will se the page with the new data
• and so on...

After 60 seconds NextJS rebuilds the pages for him and serves the fresh content.

So no this concept is wrong, next.js will not rebuild the page after n seconds, but for every request next.js will check if the time elapsed since the last request is > that the expiry date of the cache. if your revalidate value is 1 second, but the next visitor comes after 1 year, next will regenerate the page after one year.

Isabeau

First of all thank you for your response! Is there an option to use SSG (so withouth the automatic revalidation used by ISR) and force NextJS to rebuild all pages after a given time, independently of cache age and requests? Like running "npm run build" but without killing the active instance? – Inextirpable

I dont think that there is a native way to do that, but you can setub cron jobs – Isabeau

If you have 1000 visitors / day on that page it will build thousands times resulting in consuming a lot of bandwidth and memory. – Maryannemarybella

It will not rebuild it will revalidate the data in server background, but still consume APIs, so if you have limited bandwidth on API you can increase time to be 1 hour, so in worst cases, getStaticProp will use your call your API 24 times per day. – Benedikt

Is it possible to serve the fresh page to the first user that visits it after the revalidation time is over? I.e. have it behave like getServerSideProps on that first request? – Nickname

@Isabeau In the fourth point if user comes after cache expires it revalidate the page in background but user still see the old page. I think here if cache expires the user should see the new page instead of Old one ? – Dynasty

@Isabeau This was a really nice explanation. Well done and thanks. – Juvenile

Answer 2

I had an issue that content does not get updated, even when I set revalidate to 10 secs.

I was querying Sanity CMS's Graphql API with Apollo client inside a Next JS app.

I was able to solve the issue by disabling the Apollo client's caching

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    link: new HttpLink({
        uri: `https://${process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}.api.sanity.io/v1/graphql/${process.env.NEXT_PUBLIC_SANITY_DATASET}/default`,
    }),
    cache: new InMemoryCache(),
    defaultOptions: {
        watchQuery: {
            fetchPolicy: "no-cache",
            errorPolicy: "ignore",
        },
        query: {
            fetchPolicy: "no-cache",
            errorPolicy: "all",
        },
    },
});

export default client;

Nock