Loading static page counts towards function request

Hi,

I deployed the default Next.js app with one edge function and I noticed the “Requests” under “Functions metrics” increases every time I load the page, without even invoking the API.

04:26:00.497	⚡️ Build Summary (@cloudflare/next-on-pages v1.3.1)
04:26:00.497	⚡️ 
04:26:00.497	⚡️ Edge Function Routes (1)
04:26:00.497	⚡️   - /api/hello
04:26:00.497	⚡️ 
04:26:00.497	⚡️ Other Static Assets (24)
04:26:00.498	⚡️   ┌ /404.html
04:26:00.498	⚡️   ├ /500.html
04:26:00.498	⚡️   ├ /favicon.ico
04:26:00.498	⚡️   ├ /index.html
04:26:00.498	⚡️   └ ... 20 more

As of writing, my site already used up around 300 requests. At this rate, 100k req/day would be used up in a few hours.

Is this a glitch? Cloudflare states that requests to static assets are free.

The Free plan combines bundled requests for Workers and Pages Functions. Requests to static assets on Pages will continue to be free and unlimited.

next-on-pages runs a SSR script on the whole site, which then fetches the static asset.

Static assets aren’t counted when directly fetched.
To actually have those not be counted you need to have Cloudflare Functions and not a full site-wide function, which is incompatible with how you set up Next now.

Hey there,

I believe you may be misunderstanding how the @cloudflare/next-on-pages library works a little. In the library, we take the functions and assets that Vercel builds, and transform them into a format that allows us to offer the best match to what one would encounter when deploying to Vercel.

As part of this, we have a worker script that handles all incoming requests. This worker script is different to traditional Pages functions, as it catches all requests. From there, it sends each incoming request through a routing system that follows the different rules and phases that the Vercel CLI tells us to use for your application. This system was designed to best replicate the functionality that deployments to Vercel will have.

There are different conditions that affect how an incoming request is routed or the response that is returned. All incoming requests must go through this system for us to offer the best support for your site.

When the build summary lists static assets, it is referring to anything that isn’t a serverless function generated by the Vercel CLI during the build process. Requests to these files are still intended to go through the routing system in order to be properly handled. This is our best effort to replicate the system that all incoming requests to Next.js apps on Vercel will go through.

It is important to note that requests to /_next/static do not invoke the worker. If you wish to exclude further assets from the routing system, you can modify the generated _routes.json file, however, I would recommend exercising extreme caution and not excluding anything that is a route (to prevent unexpected behaviour).

As a side note, I would recommend taking a look at your network requests when visiting pages. It’s possible that the next/link component is prefetching any routes you have links to in your pages. This could lead to a higher number of function invocations than expected.

3 Likes

Thanks @matteo and @james47 for the detailed explanation.

I guess while technically @cloudflare/next-on-pages works, it’s not really practical for production. Loading the default Next.js boilerplate site costs like 3 - 5 requests, so it’s kind of unpredictable.

So best option for now is to separate the API part to run on Workers and deploy the site as static pages. If I need SSR I would have to host somewhere else.

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