NextJS 9.4 unstable_revalidate not working

[willemliu]

So I was trying out the unstable_revalidate property and deployed it:

        // we will attempt to re-generate the page:
        // - when a request comes in
        // - at most once every 10 seconds
        unstable_revalidate: 10,

However I don't see the statically generated page being updated. I can check this via the timestamp which is being fetched.

https://static-next.willemliu.now.sh/ssg/static-generated

Edit (2020-05-14):
It seems that pages that implement getStaticProps without getStaticPaths will not be regenerated when using the unstable_revalidate option.

[willemliu]

Ow I had to wait for a bit longer. I guess it takes a bit of time to regenerate the page?

[willemliu]

[willemliu]

Is it true that using the <Link> component to navigate to and from will not show the regenerated page? Only a browser-reload of the page will load the new page?

[timneutkens]

Is it true that using the component to navigate to and from will not show the regenerated page? Only a browser-reload of the page will load the new page?

Data is prefetched for links that are in the viewport, so that's probably what you're seeing (prefetched data).

[willemliu]

OK, good to know that when a user is navigating our news website. He/she will never see a new version of the site until at some point a browser refresh is done.

[willemliu]

It seems that pages that implement getStaticProps without getStaticPaths will not be regenerated when using the unstable_revalidate option.

[timneutkens]

Can you provide an example repository?

[willemliu]

Example page: https://fd-design-system.now.sh/tokens

Note the page generated on label with date time.

Implementation: https://github.com/FDMediagroep/fd-design-system/blob/master/src/pages/tokens.tsx

The getStaticProps return a props.updated which is always the current timestamp.

[jesperordrup]

Same observation.

[bogdansoare]

same for me

[good-idea]

I'm experiencing an issue with pages that are generated at build time are not revalidated.

For instance, this does not regenerate the page when changes are made in the CMS:

/**
 * Initial Props
 */

export const getStaticProps: GetStaticProps = async (ctx) => {
  const { params } = ctx
  if (!params) return { props: { product: undefined } }
  const variables = { handle: params.productSlug }
  const response = await request<Response>(productQuery, variables)
  const products = response?.allShopifyProduct

  const product = products && products.length ? products[0] : null
  return { props: { product }, unstable_revalidate: 1 }
}

/**
 * Static Paths
 */
const pageHandlesQuery = gql`
  query ProductHandlesQuery {
    allShopifyProduct {
      _id
      shopifyId
      handle
    }
  }
`

export const getStaticPaths: GetStaticPaths = async () => {
  const result = await request<Response>(pageHandlesQuery)
  const products = definitely(result?.allShopifyProduct)
  const paths = products.map((product) => ({
    params: { productSlug: product.handle ? product.handle : undefined },
  }))

  return {
    paths,
    fallback: true,
  }
}

But this does:

/**
 * Initial Props
 */

export const getStaticProps: GetStaticProps = async (ctx) => {
  const { params } = ctx
  if (!params) return { props: { product: undefined } }
  const variables = { handle: params.productSlug }
  const response = await request<Response>(productQuery, variables)
  const products = response?.allShopifyProduct

  const product = products && products.length ? products[0] : null
  return { props: { product }, unstable_revalidate: 1 }
}

/**
 * Static Paths
 */


export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: true,
  }
}

It's the same behavior on the final example in this blog post:

https://arunoda.me/blog/what-is-nextjs-issg

Is this how the feature is supposed to work?

[jeantil]

For future reference I have created a demo of various combinations of unstable_revalidate with other features

• getStaticProps
• getStaticProps+getStaticPaths
• getStaticProps+getStaticPaths+fallback true
• getStaticProps+getStaticPaths+empty paths+fallback true

It is deployed https://next-analysis-onb37tfno.vercel.app/ for people to play with
The source code is available in this repository