Is it possible to tell Nuxt NOT to hit it's local apis and instead hit them externally?
When Nuxt finds references to local apis (/api/ etc..) on SSR it will just call those functions locally instead of "going out and then coming back in". Normally this is a good thing, but in our case not so much.
We're calling a 3rd party API from our APIs. We're getting a lot of 429 errors (too many requests) from the 3rd party API. If we enable cache on the Nuxt APIs, that doesn't seem to help much because we have 25-50 nodes running and we get a lot of server-side hits. That means each has it's own version of that cache so our cache-hit ratio is very poor.
If we could just tell Nuxt NOT to run those apis locally and just call the API like normal, we could take advantage of our edge-cache (cloudfront) and our cache-hit ratios would be much better.
3 Replies
Hi @Josh Deltener. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Nuxt’s default behavior is to directly call local API routes (e.g., /api/...) on the server during SSR, bypassing the network. This is designed for efficiency, but as you noted, it prevents leveraging external edge caches like CloudFront, since requests never leave the server process. This can lead to poor cache-hit ratios when running multiple server instances, as each instance maintains its own cache.
Based on the knowledge sources provided, there is no built-in Nuxt configuration option to force all SSR requests to local API routes to go through the network (i.e., to treat /api/* as external URLs rather than direct function calls). The direct call optimization is a core feature of Nitro, Nuxt’s server engine, and is not designed to be disabled for local API routes by default Server Engine.
However, there is an experimental feature called noVueServer, but it only disables the Vue server renderer endpoint within Nitro and does not affect how API routes are resolved or proxied noVueServer.
If you want to force Nuxt to hit your APIs externally (e.g., via CloudFront), you would need to:
- Change your API calls in your frontend code to use the full external URL (e.g., https://api.example.com/endpoint) instead of relative /api/ paths. This way, Nuxt will make a network request rather than a direct function call.
- Alternatively, you could set up a custom fetcher or proxy logic that always routes API calls through the network, but this would require manual changes in your codebase Custom useFetch in Nuxt.
There is no documented Nuxt config option to globally force all /api/ calls to go through the network instead of being handled locally.
Summary:
Nuxt does not provide a built-in way to disable direct local API calls for /api/ routes during SSR. To leverage your edge cache, you must explicitly call your APIs via their external URLs in your code. The knowledge sources do not mention a configuration flag or setting to change this behavior. If you need this at scale, consider refactoring your API calls or using a custom fetcher to always use the external endpoint. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Nuxt does not provide a built-in way to disable direct local API calls for /api/ routes during SSR. To leverage your edge cache, you must explicitly call your APIs via their external URLs in your code. The knowledge sources do not mention a configuration flag or setting to change this behavior. If you need this at scale, consider refactoring your API calls or using a custom fetcher to always use the external endpoint. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@364571742020304896> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
wow, it seems this is an easy fix!