Optimizing Costs and Performance with Vercel's New Edge Request Pricing

Understanding Vercel's New Pricing Model

Vercel recently revamped its infrastructure pricing, introducing more granular pricing categories. This change addresses several longstanding pricing issues but can introduce a notable cost component in the bandwidth section. Previously, Vercel's bandwidth pricing was straightforward at $0.40 per GB. Now, it's divided into several categories:

For more details, refer to Vercel's Improved Infrastructure Pricing blog post.

Breaking Down the New Pricing Components

Fast Data Transfer vs. Fast Origin Transfer: Fast Data Transfer refers to data delivered from Vercel's edge network to your sites'end users. Fast Origin Transfer is data transfer between Vercel's Edge network and to Vercel Functions.

Incremental Static Regeneration Costs: Previously bundled with bandwidth, these costs now include Data Cache Reads and Writes, priced at $0.40/million and $4.00/million, respectively. This change reflects the resource usage for dynamically generating and caching static content.

Edge Requests: Edge Requests, which also show up under the Usage tab in Vercel, are requests routed through Vercel's edge network. Specifically, these are the number of cached and uncached requests that your deployments have received.

The Problem with Edge Requests

In a typical Next.js application, the first request to the site can generate numerous requests for various assets like JavaScript chunks, CSS files, images, fonts, and even prefetches to other pages. For instance, the homepage of this blog performs around 25 edge requests on the first load. With a free account limit of 1 million and a paid account limit of 10 million edge requests, these limits can be quickly exhausted, leading to higher costs.

The Solution: Using an External CDN for Static Files

To mitigate these costs, you can offload part of those requests to an external CDN. And it's even a very simple solution in Next.JS. This solution not only reduces the number of edge requests counted by Vercel but also can improve performance.

For this blog, it reduces the amount of Vercel Edge Requests on the homepage from 25 to 10 (of which 5 are images).

CDN

You can use any CDN you prefer, but I recommend Bunny CDN. I have personally used it on multiple projects, and it's easy to set up. Its speed and pricing are hard to beat. With pricing between $0.01 to $0.06 per GB, it's significantly cheaper than Vercel's bandwidth pricing. Additionally, Bunny CDN has more locations worldwide than Vercel, often resulting in lower latency and improved site performance.

Here's a step-by-step guide on how to set up Bunny CDN with Next.js for handling static files:

Setting Up Bunny CDN

1. Sign Up for Bunny CDN: Use this link to sign up.
2. Add a Pull Zone: This is a zone in Bunny CDN that fetches content from your origin server.
3. Configure Origin URL: Set the origin URL to your site hosted on Vercel, e.g., https://www.example.com.
4. Optional Custom Hostname: You can add a custom hostname, such as static.example.com, for serving your static content.
5. Create an Edge Rule: Ensure that only the /next/static/ folder is served through the CDN.
   • Description: "Static only"
   • Actions: "Block requests"
   • Conditions:
     • If "Match none"
     • Request URL "Match any": */_next/static/*

Updating Next.js Configuration

In your next.config.js, update the configuration to use the CDN for static files:

const nextConfig = {
    ...
    assetPrefix: "https://static.example.com",
    ...
}

Updating CSP Policies

If you use Content Security Policies (CSP) in your next.config.js, you should add the domain of your static files to the CSP exceptions:

const nextConfig = {
    ...
    async headers() {
        return [
            {
                source: "/(.*)",
                headers: [
                    {
                        key: "Content-Security-Policy",
                        value: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' https://static.example.com; font-src 'self' https://static.example.com;",
                    },
                ],
            },
        ];
    },
    ...
}

Performance improvement

By offloading your static assets to Bunny CDN, you can significantly reduce the number of edge requests processed by Vercel, thereby lowering your costs and potentially improving the performance of your site. This approach helps you leverage Vercel's advanced edge network for dynamic content while using an efficient CDN for static assets.

For comparison, here are two screenshots of the before and after Browser network tabs. You can clearly see that the requests to Bunny CDN have lower latency from my current location than the Vercel files.

×

×