Get in touch
Back to Blog

Vercel vs Cloudflare Pages vs Netlify: Where to Host Your Frontend

hostingcomparisoninfrastructure
Vercel vs Cloudflare Pages vs Netlify: Where to Host Your Frontend

We deploy frontends multiple times a week across different projects and clients. Over the past five years, we have used Vercel, Cloudflare Pages, and Netlify in production — not in toy experiments, but for real products serving real traffic. Products like MindHyv, Vincelio, and SpotsMexico have lived on different combinations of these platforms at different stages.

All three are good. All three will work for most projects. But they have real differences that matter when you are choosing one for a production application. Here is what those differences are.

The Quick Summary

Vercel is the best developer experience for Next.js and framework-aware deployments. Premium pricing at scale. Excellent preview deployments.

Cloudflare Pages is the best value for performance-sensitive, globally distributed applications. Generous free tier. Best edge runtime.

Netlify is the most approachable platform for teams that want simplicity. Good middle ground on pricing. Strong plugin ecosystem.

Now let us get into the details.

Deployment Configuration

All three platforms support Git-based deployments. Push to a branch, get a preview URL. Merge to main, deploy to production. The differences are in how you configure builds and what frameworks get first-class treatment.

Vercel auto-detects your framework and configures the build automatically. For an Astro project, zero configuration is needed:

// vercel.json (often not needed at all)
{
  "framework": "astro",
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}

For advanced cases — rewrites, headers, redirects — you configure them in vercel.json:

{
  "redirects": [
    { "source": "/blog/:slug*", "destination": "/articles/:slug*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

Cloudflare Pages uses a wrangler.toml file for configuration, though basic projects often need nothing:

# wrangler.toml
name = "my-project"
compatibility_date = "2026-03-01"
pages_build_output_dir = "dist"

[vars]
PUBLIC_API_URL = "https://api.example.com"

For headers and redirects, Cloudflare uses _headers and _redirects files in your output directory — a simpler, file-based approach:

# public/_headers
/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY

/assets/*
  Cache-Control: public, max-age=31536000, immutable
# public/_redirects
/blog/* /articles/:splat 301

Netlify uses netlify.toml and also supports _headers and _redirects files:

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/blog/*"
  to = "/articles/:splat"
  status = 301

[[headers]]
  for = "/*"
  [headers.values]
    X-Content-Type-Options = "nosniff"
    X-Frame-Options = "DENY"

All three approaches work fine. Vercel’s auto-detection is the most convenient for getting started. Cloudflare’s file-based approach is the most portable. Netlify’s TOML config is the most explicit.

Web deployment service dashboard showing continuous integration and delivery pipeline

Free Tiers

This is where the platforms diverge significantly.

Vercel Free (Hobby):

  • 100 GB bandwidth/month
  • 6,000 build minutes/month
  • Serverless Functions (10-second timeout)
  • Edge Functions
  • Preview deployments
  • Limited to personal, non-commercial projects

Cloudflare Pages Free:

  • Unlimited bandwidth (yes, actually unlimited)
  • 500 builds/month
  • 100,000 Workers invocations/day
  • Unlimited preview deployments
  • No commercial use restriction
  • Custom domains included

Netlify Free (Starter):

  • 100 GB bandwidth/month
  • 300 build minutes/month
  • 125,000 serverless function invocations/month
  • Deploy previews
  • Custom domains included

Cloudflare’s free tier is objectively the most generous. Unlimited bandwidth with no commercial restriction is hard to beat. If you are bootstrapping a product and want to minimize costs, Cloudflare Pages is the clear winner for hosting.

Pricing at Scale

Free tiers stop mattering once you have real traffic. Here is where the platforms compare for a medium-traffic application (say, 500 GB bandwidth/month, 50,000 serverless invocations/day):

Vercel Pro starts at $20/user/month. Bandwidth is $40 per 100 GB beyond the included 1 TB. Serverless Function execution is metered. Edge Function invocations are included. For a team of 4 with moderate traffic, expect $80-150/month before bandwidth overages.

Cloudflare Pages is free for static assets regardless of bandwidth. Workers (their serverless functions) are $5/month for 10 million invocations on the paid plan. KV storage, D1 database, and R2 object storage have separate pricing, but all are cheap. For the same team and traffic, expect $5-25/month.

Netlify Pro is $19/member/month. Bandwidth is $55 per 100 GB beyond the included 1 TB. Serverless functions are 125,000/month included, then $25 per additional 500,000. For the same scenario, expect $76-130/month.

The pricing gap is real. Cloudflare is substantially cheaper at every scale. The trade-off is developer experience and ecosystem integration, which we will cover next.

Performance and Edge Computing

Cloudflare has the largest edge network (300+ cities in 100+ countries). Static assets are served from the nearest edge node. Workers run at the edge by default, meaning your server-side logic runs close to your users. For a product like SpotsMexico, which serves users across Latin America, edge proximity makes a measurable difference in Time to First Byte.

Cloudflare Workers use the V8 runtime (not Node.js), which means no fs, no path, no Node-specific APIs. This is a constraint, but it also means Workers start in under 5 milliseconds — there is no cold start problem.

// Cloudflare Worker (Pages Function)
// functions/api/locations/[id].ts
export const onRequestGet: PagesFunction<Env> = async (context) => {
  const { id } = context.params;
  const location = await context.env.DB.prepare(
    "SELECT * FROM locations WHERE id = ?"
  ).bind(id).first();

  if (!location) {
    return new Response("Not found", { status: 404 });
  }

  return Response.json(location, {
    headers: {
      "Cache-Control": "public, max-age=3600",
    },
  });
};

Vercel runs Edge Functions on Cloudflare’s network (ironically) and Serverless Functions on AWS Lambda. Edge Functions have the same V8 constraints as Workers. Serverless Functions support full Node.js but have cold starts. Vercel’s Edge Middleware is useful for authentication, A/B testing, and redirects at the edge before the request reaches your application.

// Vercel Edge Middleware
// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const country = request.geo?.country || "US";

  if (country === "MX" && !request.nextUrl.pathname.startsWith("/mx")) {
    return NextResponse.redirect(new URL("/mx" + request.nextUrl.pathname, request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

Netlify has edge functions powered by Deno. They run on a smaller edge network than Cloudflare but cover major regions well. Netlify Functions (non-edge) run on AWS Lambda with the same cold start characteristics as Vercel’s serverless functions.

For raw performance and global coverage, Cloudflare wins. For framework-integrated edge logic (especially with Next.js), Vercel is more convenient. Netlify’s edge offering is adequate but not a differentiator.

Global content delivery network infrastructure distributing web assets worldwide

Build Times and Developer Experience

Vercel has the best developer experience for Next.js projects, period. Remote Caching shares build caches across team members. Incremental Static Regeneration works out of the box. Preview deployments include comments and collaboration features. The dashboard is polished.

For non-Next.js frameworks (Astro, SvelteKit, Nuxt), Vercel is still good but the magic diminishes. You are configuring things manually that Next.js gets for free.

Cloudflare Pages builds are fast and reliable. The dashboard is functional but not as polished as Vercel’s. Where Cloudflare shines is the integration with the broader Cloudflare ecosystem — D1 (SQLite at the edge), R2 (S3-compatible object storage), KV (key-value storage), Queues, Durable Objects. If your application needs backend infrastructure beyond just hosting, Cloudflare offers a cohesive platform.

Netlify pioneered the Jamstack deployment model and still does it well. Their build plugins ecosystem is unique — you can add functionality like image optimization, cache invalidation, or audit checks as part of your build pipeline:

# netlify.toml
[[plugins]]
  package = "@netlify/plugin-lighthouse"

[[plugins]]
  package = "netlify-plugin-cache"
  [plugins.inputs]
    paths = [".cache", "node_modules/.cache"]

Netlify also has split testing (A/B testing at the CDN level) and form handling built in, which are genuinely useful features that the other platforms do not include natively.

Custom Domains and SSL

All three platforms provide free SSL certificates and straightforward custom domain setup. No meaningful differences here.

One minor note: Cloudflare can act as your DNS provider and CDN simultaneously, which simplifies your infrastructure. If your domain’s nameservers are already pointed to Cloudflare, connecting a custom domain to Pages is instant — no DNS propagation delay.

Server rack hardware in a hosting data center powering web applications

Analytics

Vercel includes Web Vitals monitoring (LCP, FID, CLS, TTFB) and audience analytics on the Pro plan. The data is first-party, privacy-friendly, and does not require a client-side script for basic metrics.

Cloudflare offers Web Analytics for free — also privacy-friendly and script-based. It is basic but sufficient for traffic and performance overview. More detailed analytics come through Cloudflare’s broader observability tools.

Netlify includes analytics as an add-on ($9/month per site). It provides pageviews, unique visitors, and bandwidth breakdowns. Functional but not a selling point.

For analytics alone, Vercel’s built-in Web Vitals dashboard is the most useful for frontend developers.

Which Should You Choose?

Choose Vercel if:

  • You are building with Next.js (it is the obvious choice)
  • Developer experience and polish matter more than cost
  • You want built-in analytics and collaboration features
  • Your team is small and the per-seat pricing is manageable

Choose Cloudflare Pages if:

  • Cost matters (especially at scale)
  • Global performance is critical
  • You want to build on Cloudflare’s broader platform (D1, R2, KV, Workers)
  • You are comfortable with the V8 runtime constraints
  • You need unlimited bandwidth on the free tier

Choose Netlify if:

  • Simplicity is your priority
  • You want built-in form handling and split testing
  • The build plugin ecosystem solves problems you would otherwise handle manually
  • You are migrating from an older Jamstack setup

What we actually do: For most client projects, we start on Cloudflare Pages for the cost advantage and edge performance, especially for Astro and SvelteKit projects. For Next.js projects (when the client requires React — see our framework comparison), we use Vercel because the integration is too good to ignore. We reach for Netlify when a project specifically benefits from its plugin ecosystem or form handling.

The good news is that switching between these platforms is not difficult for most projects. A static site or SSR app built with Astro, SvelteKit, or Next.js can move between all three with minimal configuration changes. The lockin risk is low for all three.

If you are trying to decide where to host your next project and want a recommendation based on your specific stack and traffic patterns, reach out at [email protected].

hostingcomparisoninfrastructure