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.

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.

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;