Nuxt•3w ago

Tips to reduce Edge requests & Vercel costs?

Hi! I'm working on a Nuxt (3.9.1) project that recently got a big spike in popularity, with hundreds of users connected at once throughout the day. But it has caused a significant increase in costs. The setup is pretty standard: prerender: true for static pages and ISR for dynamic pages. There are a lot of list pages with small images and a user section for comments (Supabase). I’ve already moved most assets to Bunny CDN, which helped lower costs, but I’m looking for more ways to optimize, especially to reduce Edge requests and save more. Do you have any tips or articles to recommend? Thanks!

2 Replies

kapa.ai•3w ago

Hi @Ayaaa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some tips to help reduce Edge requests and potentially lower your Vercel costs for your Nuxt 3 project. Here are some strategies you can consider: 1. Implement On-Demand Incremental Static Regeneration (ISR): Instead of using regular ISR, which revalidates pages at fixed intervals, you can use on-demand revalidation. This allows you to purge the cache for an ISR route only when necessary, reducing unnecessary regenerations. You can set this up by creating an environment variable for a revalidation secret and updating your Nitro configuration as shown in the Vercel deployment guide (https://nitro.unjs.io/deploy/providers/vercel#on-demand-incremental-static-regeneration-isr). 2. Optimize your Route Rules: Use Nuxt's hybrid rendering capabilities to define specific caching strategies for different routes. This can help reduce the number of Edge requests by caching certain pages or API routes. For example:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products': { swr: true },
    '/products/**': { swr: 3600 },
    '/blog': { isr: 3600 },
    '/blog/**': { isr: true },
    '/admin/**': { ssr: false },
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products': { swr: true },
    '/products/**': { swr: 3600 },
    '/blog': { isr: 3600 },
    '/blog/**': { isr: true },
    '/admin/**': { ssr: false },
  }
})

This configuration, as shown in the Nuxt hybrid rendering documentation (https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering), allows you to fine-tune the rendering and caching strategy for different parts of your application. 3. Optimize Images: Since you mentioned having many list pages with small images, ensure you're using Nuxt Image for optimal image delivery. Nuxt Image has integrations with various providers, including Vercel's Edge Network. You can configure it to optimize images on-demand, reducing the load on your Edge functions. Check the Nuxt Image Vercel provider documentation (https://image.nuxt.com/providers/vercel) for more details. 4. Implement proper caching strategies: For your dynamic pages and API routes, implement appropriate caching strategies. You can use the cache option in your route rules to cache responses at the edge. This can significantly reduce the number of requests hitting your Edge functions. 5. Optimize your payload: Reduce the size of your payload (also known as NUXT) to improve performance and potentially reduce costs. The Nuxt Performance in Depth video (https://www.youtube.com/watch?v=laRJNkG_wls) discusses techniques to reduce the payload size, which could help in reducing data transfer and processing at the edge. 6. Consider using static generation for more pages: If possible, consider pre-rendering more of your pages at build time using nuxi generate. This can reduce the load on your Edge functions by serving static HTML files directly from the CDN. You can find more information about this in the Nuxt prerendering documentation (https://nuxt.com/docs/getting-started/prerendering). 7. Optimize your Supabase queries: Ensure that your Supabase queries for user comments are efficient and only fetch the necessary data. Consider implementing pagination or lazy loading for comments to reduce the amount of data transferred in each request. Remember to test these optimizations thoroughly in a staging environment before applying them to your production site. Monitor your Vercel analytics closely to see the impact of these changes on your Edge request count and overall costs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@290547056345481227> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Tips to reduce Edge requests & Vercel costs?