Error when using ISR with Cloudflare Pages (Nextjs)

So I’m trying to do on-demand revalidation with the new app router because now it’s compatible with the edge network. It works when deployed to Vercel but not Cloudflare Pages.

Upon running the revalidation route I get the following error in Cloudflare’s logs:

"logs": [
    {
      "message": [
        "Failed to revalidate tag /web-design-examples/[...id]",
        "TypeError: Fetch API cannot load: undefined/v1/suspense-cache/revalidate?tags=/web-design-examples/[...id]"
      ],
      "level": "warn",
      "timestamp": 1687740895012
    }
  ],

If anyone has any insight it’d be much appreciated! The Nextjs docs don’t really have any info for this

Hey there, I’m afraid ISR is not supported with @cloudflare/next-on-pages. This is due to limitations that are out of our control.

ISR depends on a type of function that Vercel calls Prerender functions. These are Node.js functions that are incompatible with the edge runtime. This means that we are unable to deploy them and, so, there is no prerender function available for us to invoke when triggering a page revalidation.

You can read more about this in our docs.

When you try to use revalidatePath on the edge runtime, it is actually trying to send an HTTP request to an API endpoint that is injected into the app, to trigger a revalidation remotely. This is how Vercel allows people to do on-demand revalidations in the edge runtime - it just sends an API request to them to know that they should trigger an invocation of the Node.js Prerender function.

3 Likes

Damn okay, well thanks for the response.

After reading through what you sent, would it be possible to make on-demand revalidation work by configuring a custom cache handler (like the example code in the Nextjs docs) to store and retrieve with KV?

I’m not quite sure what you mean by making on-demand revalidation work when it comes to pages/routes. We are not able to invoke the Node.js Prerender functions that we would need to use to render a new version of the page that can then replace the version in the cache.

The only way (on-demand) revalidation of routes can be supported is if Prerender functions can be built to target the edge runtime, which is not possible at the moment, or if Cloudflare introduces a new product to run Node.js functions.

The link you gave for the docs doesn’t work, but I would assume it’s the incrementalCacheHandlerPath one? If so, that does not actually work with the Vercel build output, which is what we depend on. Lee from Vercel touched on this in a PR against our repo.

With regards to caching of fetch requests and revalidating tags (not ISR), it’s possible that there may be some hackery that could be done to get it working, but the proper way to get fetch request caching/revalidation would be to use the custom incremental cache handler option that sadly does not work yet for us. So, this isn’t something that is implemented at this point in time.

3 Likes

Ok got it. What I was thinking is that it would probably be possible to implement some form of tag revalidation that approximates ISR. Oh well.

I guess it’s time to look more into Remix, Nextjs not following existing web standards is starting to rub me the wrong way.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.