DEV Community

Cover image for Why Your App Might Be Costing More Than You Think
Mohamed Ibrahim
Mohamed Ibrahim

Posted on

Why Your App Might Be Costing More Than You Think

#programming #webdev #productivity #devops

Understanding Edge Requests, Bandwidth, CDN, Fast Origin Transfer, and Why Your Next.js App Might Be Costing More Than You Think

A deep but beginner-friendly guide to how modern web infrastructure actually works — especially on platforms like Vercel.

Introduction

When I first started deploying apps, I thought hosting was simple:

  • Upload website
  • Users open it
  • Done

But after deploying real-world apps — especially with Next.js on platforms like Vercel — I started seeing terms like:

  • Edge Requests
  • Bandwidth
  • Fast Origin Transfer
  • CDN
  • Serverless Computing
  • Edge Functions
  • Cache Hits & Misses

At first, all of this felt confusing.

Why is a simple website making thousands of requests?
Why does bandwidth suddenly spike?
Why can a Next.js app become expensive faster than expected?
Why does enabling Cloudflare sometimes reduce costs dramatically?

This article is the guide I wish I had earlier.

We’ll go deep — but explain everything in simple language.

The Internet Is Basically Moving Files Around

At its core, the web is simpler than it looks.

Every time someone visits your site:

  1. Their browser sends requests
  2. Your server responds with files
  3. The browser renders the page

Those files might include:

  • HTML
  • CSS
  • JavaScript
  • Images
  • Fonts
  • API responses
  • Videos

The internet is basically:

“Requests going in, data coming out.”

Everything else is optimization.

What Is a Request?

A request is simply:

“Hey server, give me this thing.”

Example:

Your homepage might need:

  • index.html
  • main.js
  • styles.css
  • logo.png
  • 10 product images
  • API data

That single page visit could easily generate:

  • 20–100 requests

Not 1.

This surprises many beginners.

What Are Edge Requests?

Edge Requests are requests handled by servers close to the user.

Instead of every user connecting directly to your main server, platforms use global infrastructure.

Imagine:

  • User in Egypt
  • Your server is in the US

Without edge infrastructure:

Egypt → US → Egypt

That’s slower.

With edge infrastructure:

Egypt → Nearby Edge Server

Much faster.

What Does “Edge” Actually Mean?

“Edge” means:

Servers distributed around the world near users.

Companies like:

have data centers globally.

These edge servers can:

  • Cache files
  • Run code
  • Return responses
  • Block attacks
  • Compress assets

This reduces latency massively.

What Is a CDN?

CDN = Content Delivery Network.

A CDN is basically:

A network of edge servers that cache and deliver content faster.

Instead of downloading your image from one server in one country:

The CDN stores copies worldwide.

So users download from the nearest location.

Simple CDN Example

Without CDN:

User → Main Server → Response
Enter fullscreen mode Exit fullscreen mode

With CDN:

User → Nearby CDN Server → Response
Enter fullscreen mode Exit fullscreen mode

Huge difference.

Especially for:

  • Images
  • Videos
  • CSS
  • JavaScript
  • Fonts

Why CDNs Matter So Much

CDNs improve:

1. Speed

Closer servers = lower latency.

2. Lower Server Load

Your origin server gets fewer requests.

3. Lower Bandwidth Usage

Cached content avoids repeated transfers from origin.

4. Better Scalability

Millions of users become manageable.

5. DDoS Protection

Many CDNs block malicious traffic automatically.

What Is Bandwidth?

Bandwidth is the amount of data transferred.

Example:

  • Image = 2MB
  • 1000 users download it

Bandwidth used:

2MB × 1000 = 2000MB
Enter fullscreen mode Exit fullscreen mode

That’s about 2GB.

Bandwidth is usually one of the biggest hosting costs.

Especially for:

  • Images
  • Videos
  • AI apps
  • File downloads
  • Large APIs

Why Images Destroy Bandwidth

Developers massively underestimate image costs.

Example:

Homepage:
- 20 images
- Each image = 500KB
Enter fullscreen mode Exit fullscreen mode

That’s:

10MB per visit
Enter fullscreen mode Exit fullscreen mode

10,000 visits:

100GB bandwidth
Enter fullscreen mode Exit fullscreen mode

From images alone.

What Is Fast Origin Transfer?

This term is common on Vercel.

To understand it, we first need to understand “Origin.”

What Is the Origin Server?

The Origin is:

The main source server where the original content exists.

Example:

User → CDN → Origin Server
Enter fullscreen mode Exit fullscreen mode

If the CDN already has cached content:

CDN → User
Enter fullscreen mode Exit fullscreen mode

No origin needed.

But if the CDN misses:

CDN → Origin → CDN → User
Enter fullscreen mode Exit fullscreen mode

That transfer from origin is important.

Fast Origin Transfer Explained Simply

Fast Origin Transfer is basically:

Data transferred from your origin infrastructure to edge locations quickly.

This often happens when:

  • Cache misses occur
  • Dynamic content is generated
  • Server-side rendering runs
  • Functions execute
  • Data isn’t cached

If your cache strategy is poor:

Your origin gets hammered.

Costs rise fast.

Cache Hits vs Cache Misses

This is one of the most important concepts in web performance.

Cache Hit

The CDN already has the file.

User → CDN → Done
Enter fullscreen mode Exit fullscreen mode

Fast and cheap.

Cache Miss

The CDN doesn’t have the file.

User → CDN → Origin Server
Enter fullscreen mode Exit fullscreen mode

Slower and more expensive.

Why Next.js Can Increase Costs

This is where things get interesting.

Next.js is extremely powerful.

But many features trade simplicity for infrastructure complexity.

Static vs Dynamic Pages

Static Page

Generated once.

Same for everyone.

Cheap.

Example:

Blog article
Landing page
Documentation
Enter fullscreen mode Exit fullscreen mode

Perfect for CDN caching.

Dynamic Page

Generated per request.

Example:

Dashboard
Personalized feed
Authenticated pages
Enter fullscreen mode Exit fullscreen mode

These often require:

  • Serverless functions
  • Database calls
  • Edge compute
  • Origin traffic

Much more expensive.

Why Server Components Can Cause More Work

Modern Next.js apps often:

  • Fetch data server-side
  • Stream UI
  • Revalidate content
  • Use middleware
  • Run authentication checks

This creates more compute operations.

Even if the app looks simple.

What Is Compute?

Compute means:

Server resources used to execute code.

This includes:

  • CPU usage
  • Memory usage
  • Function execution time

When code runs:

You consume compute.

Static File vs Compute

Serving a static image:

Very cheap
Enter fullscreen mode Exit fullscreen mode

Running server code:

More expensive
Enter fullscreen mode Exit fullscreen mode

Running AI inference:

Very expensive
Enter fullscreen mode Exit fullscreen mode

Serverless Functions Explained

Platforms like Vercel heavily use serverless architecture.

Instead of:

One always-running server
Enter fullscreen mode Exit fullscreen mode

You get:

Functions that run only when needed
Enter fullscreen mode Exit fullscreen mode

Advantages:

  • Auto scaling
  • Easier deployments
  • Pay-per-use

Disadvantages:

  • Cold starts
  • Higher costs at scale
  • Complex billing metrics

Why Middleware Can Accidentally Explode Edge Requests

This is a huge issue in many Next.js apps.

If middleware runs on every request:

Every image
Every page
Every asset
Every API request
Enter fullscreen mode Exit fullscreen mode

Then edge requests skyrocket.

Developers often don’t realize this.

Example of a Bad Middleware Setup

Imagine middleware checking auth for:

  • /
  • /dashboard
  • /logo.png
  • /fonts/inter.woff
  • /favicon.ico

Now every asset triggers compute.

That’s expensive.

Why Authentication Increases Costs

Auth systems often require:

  • Cookie parsing
  • Token validation
  • Session fetching
  • Database reads

Doing this globally at the edge:

Millions of compute executions
Enter fullscreen mode Exit fullscreen mode

even on small projects.

Why Cloudflare Can Reduce Costs Dramatically

Many developers place Cloudflare in front of Vercel.

Why?

Because Cloudflare can:

  • Cache aggressively
  • Block bots
  • Reduce origin hits
  • Compress assets
  • Filter traffic before Vercel sees it

This reduces:

  • Edge Requests
  • Bandwidth
  • Origin Transfer
  • Compute usage

But There’s a Tradeoff

Using Cloudflare in front of Vercel can sometimes:

  • Break automatic optimizations
  • Affect analytics accuracy
  • Interfere with bot protection
  • Cause caching confusion

So it must be configured carefully.

Why Bots Increase Costs

A shocking amount of internet traffic is bots.

Bots can:

  • Crawl pages
  • Spam APIs
  • Scrape content
  • Hammer dynamic routes

Even if you have few real users.

Without protection:

Costs rise quickly.

Why Caching Is Everything

Modern web performance is basically:

“How much can we avoid recomputing?”

Good caching means:

  • Fewer requests
  • Lower compute
  • Lower bandwidth
  • Faster pages
  • Lower bills

The Ideal Architecture

The cheapest scalable architecture usually looks like:

CDN Cache First
↓
Static Assets
↓
Minimal Dynamic Logic
↓
Efficient APIs
↓
Database Only When Necessary
Enter fullscreen mode Exit fullscreen mode

Why Static Sites Scale So Well

A static site can handle massive traffic cheaply because:

  • Files are prebuilt
  • CDN serves everything
  • Minimal compute needed

This is why documentation sites are so cheap.

Why AI Apps Become Expensive Fast

AI apps combine:

  • Heavy compute
  • Large bandwidth
  • Long requests
  • Streaming responses
  • GPUs

Costs rise dramatically compared to normal apps.

How to Reduce Vercel Costs

1. Cache Aggressively

Use:

  • Static rendering
  • ISR
  • CDN caching

whenever possible.

2. Avoid Unnecessary Middleware

Scope middleware carefully.

Never run it globally unless necessary.

3. Optimize Images

Use:

  • Compression
  • WebP
  • AVIF
  • Lazy loading

Images are bandwidth killers.

4. Avoid Dynamic Rendering Everywhere

Not every page needs SSR.

Static pages are cheaper and faster.

5. Use Cloudflare Carefully

Cloudflare can massively reduce costs if configured properly.

Especially for:

  • Bots
  • Static assets
  • Caching
  • DDoS protection

6. Monitor Analytics Constantly

Most developers only discover problems after huge bills.

Watch:

  • Edge Requests
  • Function Invocations
  • Cache Hit Ratio
  • Bandwidth
  • Bot Traffic

The Biggest Beginner Mistake

Many developers optimize for:

Developer Experience
Enter fullscreen mode Exit fullscreen mode

instead of:

Infrastructure Efficiency
Enter fullscreen mode Exit fullscreen mode

Modern frameworks make powerful features incredibly easy.

But “easy” doesn’t mean “cheap.”

Final Thoughts

Modern web infrastructure is fascinating because almost everything comes down to:

  • Moving data
  • Avoiding unnecessary work
  • Caching intelligently
  • Running compute efficiently

Once you understand:

  • CDN
  • Edge
  • Compute
  • Caching
  • Origin Transfer
  • Serverless infrastructure

you start seeing the internet differently.

You realize:

Performance and cost are deeply connected.

And sometimes the fastest app is simply:

The app doing the least work possible.

Top comments (0)