High amount of API calls only im development

Developing with Prismic
1

Hey guys,

I have hit nearly 4,000,000 API calls in 14 days. The catch is that I have no real users yet because we are still in development.

I surely did something wrong but I can not find the issue.

I know got a CSV from the prismic team sharing my API calls, the query strings and the amount.

All my query strings and amount do look fine - so no excessive call amount. Except one:

uri: /api/v2
querystring: -
api_calls: 3780135

I have no clue why this happens - maybe someone has an idea!

I use Next 15 with app router.

I‘m happy for every clue.

Thanks a lot

2

Hi @andreas.markl,

Have you had a look at this FAQ: Optimizing Prismic API Usage: Why It Might Be Higher Than Expected? It might put you on the right path. Another one that may be useful to you is this one: Prismic API Limits and CDN Bandwidth explained: FAQ Guide - #2, if only to give you more information on what's happening here :slight_smile:

Let me know if you need anything more specific.

3

Hey,

thanks a lot for sharing. I read both of these posts a couple of days ago.

But I still did not find the problem. I tried chaching more strictly, checked for client side fetching and so on.

4

Glad you were able to find and read those posts, sorry they haven't helped your case! Here's some other things, more specific, that might be worth looking into:

  1. Uncontrolled Revalidation (ISR or SSR Loops)

    • If you're using fetch inside getServerSideProps, getStaticProps, or revalidatePath, it might be triggering excessive re-fetching.
    • Check if any page is fetching data on every request when it should be cached.

  2. Infinite Loop in Middleware or API Route

    • If you have middleware that makes a request to /api/v2, and /api/v2 itself triggers the middleware, you might have an infinite loop.
    • Check any middleware that could be redirecting or fetching data unintentionally.

  3. Unexpected Client-Side Polling

    • If you have a polling function (setInterval, useEffect with a short re-fetch interval), it might be hammering your API.
    • Look for any API calls in React components that don’t have proper caching or interval control.

  4. Misconfigured useEffect or useSWR

    • If useEffect or useSWR has incorrect dependencies or lacks a proper condition, it could be firing continuously.

  5. External Service or Bot Hitting Your API

    • If /api/v2 is exposed, external scrapers or bots might be hitting it.
    • Check logs for IP addresses making the requests.

How to Debug:

:white_check_mark: Use Logging

  • Add console.log inside /api/v2 to track what triggers it.
  • Log request headers and referrer info.

:white_check_mark: Check Prismic Integration

  • If you're using Prismic’s API in your Next.js app, ensure it's not being called repeatedly by an uncontrolled loop.

:white_check_mark: Monitor Network Requests

  • Open DevTools (F12) → Network tab and check if /api/v2 is being called repeatedly.

:white_check_mark: Use throttle or debounce

  • If you're calling an API inside a React component, use lodash.throttle or debounce to limit the number of calls.

Let me know if that helps :slight_smile:

5

Hey, thanks a lot for your input. Just for clarification - what do you mean with this:

** Add console.log inside /api/v2 to track what triggers it.*
** Log request headers and referrer info.*

6

Also I found this in my package.json:

"build": "rm -rf .next/cache/fetch-cache && next build",

Can the cache clearance have an impact this heavy?

8

I saw your other post about the ref being invalid, we'll reply over there. It's better to keep separate threads for separate topics, in case other people need help :slight_smile:

Hey, thanks a lot for your input. Just for clarification - what do you mean with this:

** Add console.log inside /api/v2 to track what triggers it.*
** Log request headers and referrer info.*

If you have a custom API route at /api/v2, add logging inside it to see when and why it's getting hit.

Example:

export default async function handler(req, res) {
  console.log("API /api/v2 hit at:", new Date().toISOString());
  console.log("Request headers:", req.headers);
  console.log("Request body:", req.body);

  return res.status(200).json({ message: "OK" });
}

This will help you track:

  • When /api/v2 gets hit.
  • How often it's called.
  • What headers and body are sent (which can reveal the source of calls).

If you don’t have a custom API route at /api/v2, but it’s a Prismic API URL, check where it’s being fetched in your Next.js code.

If you log request headers and referrer info, it will help you identify who or what is making the requests.

Inside /api/v2 (if it exists), add:

console.log("Referrer:", req.headers.referer || "No referrer");
console.log("User-Agent:", req.headers["user-agent"]);
  • Referrer tells you where the request originated from.
  • User-Agent helps identify if a bot or external service is calling it.

For example:

  • If the referrer is an external site → someone else might be hitting your API.
  • If it’s from your Next.js app → check your code for excessive calls.

You might already have this information in the CVS you got from the team!

Can the cache clearance have an impact this heavy?

Yes, but not directly in the way you're seeing.

Your package.json build script:

"build": "rm -rf .next/cache/fetch-cache && next build"
  • Deletes the fetch cache before every build.
  • Forces Next.js to re-fetch all external data when the app starts.

If your app is auto-deploying frequently (e.g., every commit to Vercel or CI/CD runs), this could cause a high number of API calls whenever the app rebuilds and boots up.

How to Check if This Is the Cause

  1. Do you see API call spikes after every deployment?
  2. Does /api/v2 get called immediately after a build finishes?

Hope that helps!

9

Hey,
I do not have a route "/api/v2". It's the prismic API URL.

I've implemented some logging inside my prismic client setup. This should log each request, should it not?

export const createClient = ({
  previewData,
  req,
  ...config
}: prismicNext.CreateClientConfig = {}) => {
  const client = prismic.createClient(repositoryName, {
    accessToken: process.env.PRISMIC_API_KEY,
    routes,
    fetchOptions:
      process.env.NODE_ENV === "production"
        ? { next: { tags: ["prismic"] }, cache: "force-cache" }
        : { next: { revalidate: 3600 } },
    ...config,
  });

  const originalFetch = client.fetchFn;
  client.fetchFn = async (url, options) => {
    console.log("--- Prismic API Call ---");

    const response = await originalFetch(url, options);

    return response;
  };

  prismicNext.enableAutoPreviews({ client, previewData, req });

  return client;
};

Thanks for your help so far.
The problems worries me very much because I have to pay a lot of money due to the many API calls my app is making.

10

I also think that this "retrying with the latest" ref has something to do with it. Because instead of expected 5 API calls I get like 50-60 per request in my logs because it is always retrying and retrying...

11

Hi Andreas,

Since the spike occurred within the past month or so, if you're using git, are you able to see if any major changes were made the past month in your repo.?

12

Hi Edu,
I had high amounts of API calls the previous months too, but not nearly that much. The periods before I had between 400,000 up to 1,000,000.

I upgraded to Next 15. Other commits should not interfer with the API call amount.

14

I would like to share an update:

The issue with the enormous amount does not persist any more. I still have a high number of API calls but not near the count of the previous week.

Since Next 15 - unlike Next 14 - does not cache dynamic routes by default I implement a caching strategy with unstable_cache. After "use cache" get's stable I switch to that instead.

Hope this helps someone with a similar problem in the near future.

Thanks @Edu for your help!
Andreas

1 Like
15

Hi @andreas.markl,

This makes sense! Thanks for getting back to us with this, I also hope it can help someone else in the future :slight_smile:

1 Like