Reducing Vercel Edge Requests on Static App
Hello!
I'm currently hoping to reduce my edge requests by 1 million requests per month. I was hitting 4-5million requests until I moved to a CDN, which has reduced it to about 2 million. I'm currently on the PRO plan and am hoping to move down to Hobby plan due to financial constraints.
After an inspection of my requests, I've discovered a huge chunk of my remaining requests come from files generated via code splitting. This is an area I'm not familiar with.
My initial thoughts are reducing how many files are being code-split or disabling it outright. I'm also considering caching as another option given I have a relatively high cache hit rate. Given my lack of knowledge in this field, I'm hoping for directions on where to take my app in terms of cost and performance
5 Replies
Hi @Aisen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Reducing edge requests on Vercel for a Nuxt static app can be approached in a few ways, but it's important to understand the trade-offs:
1. Code Splitting
Nuxt automatically code-splits your application, creating separate JavaScript chunks for each route and component. This improves performance by only loading what's needed, but it does increase the number of requests for those chunks. While you could try to reduce code splitting, Nuxt's architecture is designed for this, and disabling it is not recommended as it can negatively impact performance and user experience. The knowledge sources do not provide a way to fully disable code splitting in Nuxt, and doing so is generally not advised for production apps as it would increase initial load times and bundle sizes, especially for larger apps Nuxt Routing & Code Splitting.
2. Caching
Since you already have a high cache hit rate, further improvements here may be limited. However, you can leverage Vercel's CDN and edge caching more aggressively. For static sites, ensure that your CDN is configured to cache all static assets (JS, CSS, images) as long as possible. This reduces the number of edge requests that reach your origin or count against your Vercel quota.
3. Prerendering and Static Hosting
If your app is mostly static, use Nuxt's static site generation (
- You cannot (and generally should not) fully disable code splitting in Nuxt. - Focus on maximizing CDN and browser caching for static assets. - Use static site generation and prerendering for as many routes as possible. - Consider caching dynamic data with Vercel KV if applicable. If you need more specific guidance on configuring caching headers or route rules in Nuxt, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
nuxt generate) to pre-render as much as possible. This will output static HTML and assets that can be cached at the CDN level, minimizing dynamic edge requests Nuxt Static Hosting.
4. Route Rules and Hybrid Rendering
Nuxt supports hybrid rendering and route rules, allowing you to prerender only the most-visited or least-dynamic routes, while keeping others dynamic if needed. This can help reduce unnecessary edge computation and requests Nuxt Hybrid Rendering.
5. Asset Optimization
Make sure your static assets are optimized and served with long cache headers. Nuxt and Vercel handle this well by default, but double-check your configuration.
6. Caching with Vercel KV (Advanced)
If you have dynamic data that doesn't change often, you can cache it using Vercel KV. This can reduce the number of edge function invocations by serving cached data directly Set up caching with Vercel KV.
---
Summary:- You cannot (and generally should not) fully disable code splitting in Nuxt. - Focus on maximizing CDN and browser caching for static assets. - Use static site generation and prerendering for as many routes as possible. - Consider caching dynamic data with Vercel KV if applicable. If you need more specific guidance on configuring caching headers or route rules in Nuxt, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@204462556012740608> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Suggestion 2 is interesting but I'm unsure if I'm reading it right. My entire website is static, and the JS files I refer to are all generated by Nuxt. Should I be finding a way to have those JS files moved into my CDN? I will have to automate the process somehow and that's not a field I know of.
Alternatively, I do have js/css files in my static folder but I assume Nuxt was packaging those along with my components as needed.
Let me check the knowledge base for you again. One moment! :books:
----------------------
If your entire website is static and built with Nuxt, all the JavaScript files generated by Nuxt (including those from code splitting) are already intended to be served as static assets. When you run
- Files in
- You do not need to manually move Nuxt-generated JS files to your CDN; deploying the output directory is sufficient. - Files in
nuxt generate, Nuxt outputs your site—including all JS, CSS, and other assets—into a directory (commonly .output/public or dist/), which is ready to be deployed to any static hosting or CDN. You do not need to manually move these files; deploying the output directory to your CDN or static host is the standard process see Nuxt Static Hosting.
How it works:
- All JS/CSS files generated by Nuxt are placed in the output directory.
- When you deploy to a static host or CDN (like Vercel), these files are automatically served from the CDN edge, provided your deployment is set up correctly.
- You do not need to automate any extra process for moving these files—they are part of the standard Nuxt static deployment workflow.
Regarding your own js/css files in the public/ (or static/) folder:- Files in
public/ are served as-is at the root of your site and are not bundled or processed by Nuxt. They are simply copied to the output and served directly see Nuxt Assets Guide.
- If you want these files to be part of your CDN deployment, just ensure they are in the public/ directory before you build and deploy.
Summary:- You do not need to manually move Nuxt-generated JS files to your CDN; deploying the output directory is sufficient. - Files in
public/ are also served as static assets and included in your deployment.
- Nuxt does not package files from public/ into your component bundles; they are served directly and separately.
If you are deploying to Vercel or another static host, your static assets (including all JS/CSS) should already be served from the CDN automatically, as long as you deploy the correct output directory see Nuxt Deployment.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@204462556012740608> Kapa.ai is still learning and improving, please let me know how I did by reacting below.