Manually preventing a page revalidation

[pepew-le-boss]

Is there a way to manually prevent a page revalidation ?
Let's take this scenario:

page:

export const revalidate = 600 // 10 minutes

export default async function HomePage() {
  return (
    <>
      <Suspense fallback={<Skeleton className="h-full w-full" />}>
        <CategoriesWrapper />
      </Suspense>
      <div>more static content ...</div>
    </>
  )
}

CategoriesWrapper:

export async function CategoriesWrapper() {
  const categoriesResponse = await graphqlServerRequest({
    document: categoriesQuery,
    onError() {
      // here I would like to prevent the revalidation of the page
      return undefined
    },
  })

  const categories = categoriesResponse?.categories

  if (!categories) {
    return null
  }

  return <Categories categories={categories} />
}

Currently, if a user visits the website after 10 minutes and revalidates the page, an error in the categoriesQuery will result in the page being cached with empty categories for the next 10 minutes.

I've tried with revalidatePath("/") but I get this error:
Page changed from static to dynamic at runtime /, reason: revalidatePath / see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error

[icyJoseph]

Maybe you could throw an exception? https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration#handling-uncaught-exceptions

If an error is thrown while attempting to revalidate data, the last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data.

[pepew-le-boss]

I can't for 2 reasons:

• If I don't get the categories from the API that's not a critical error; I just don't display them (that's why I return null in that case)
• Throwing an exception will basically either crash the website expect if I catch it with an error.tsx page (see point below)

[icyJoseph]

Regarding point 2, assume you already build the page, it is pre-rendered. Revalidation kicks in, but crashes out, then Next.js would keep on showing the old pre-rendered. I use this quite a bit with a project that consumers data from an API that goes to sleep if not queried for a while, and it works fine.

Regarding point one, maybe use a closure? If error, modify the value you have closure over, and throw an exception if that value is set. Otherwise just return what you got.

Also during build time, IIRC you can check an env var that tells you that we are at build time, and then you could skip your error logic during that.

I am a bit busy atm, but can provide some pseudo code samples later

[pepew-le-boss]

Regarding point 2, assume you already build the page, it is pre-rendered. Revalidation kicks in, but crashes out, then Next.js would keep on showing the old pre-rendered. I use this quite a bit with a project that consumers data from an API that goes to sleep if not queried for a while, and it works fine.

Let's say that tomorrow I remove all caching from the homepage thus becoming a dynamic page. That means (if I understand what you said correctly) that inside my page I could have components throwing errors. Seems risky and bug prone.

Regarding point one, maybe use a closure? If error, modify the value you have closure over, and throw an exception if that value is set. Otherwise just return what you got.

Also during build time, IIRC you can check an env var that tells you that we are at build time, and then you could skip your error logic during that.

Not sure to understand, would love to see some code when you have time

There is no easy to use function that would look like this ? My problem seems to be quite common when doing ISR though

const categoriesResponse = await graphqlServerRequest({
    document: categoriesQuery,
    onError() {
      preventRevalidation()
      return undefined
    },
  })

[icyJoseph]

Yeah that's the core issue I guess. I have only hacks and workarounds to offer, but there's no similar function to, not found, redirect, etc...

Maybe, would be something to propose as a Dev Experience improvement. Not that many would need it, but an explicit way to bail out would've helped you, and others perhaps.