toolfreebie

Posted on May 3 • Originally published at toolfreebie.com

Vercel vs Netlify vs Cloudflare Pages: Free Frontend Hosting Compared

#hosting #devops

Vercel, Netlify, and Cloudflare Pages: The Three Free Frontends

If you’re hosting a static site, Next.js app, or JAMstack project in 2026, you have three dominant free options: Vercel, Netlify, and Cloudflare Pages. All three offer global CDN deployment, GitHub integration, and a genuinely useful free tier — but they differ significantly in build limits, function support, and performance.

This article cuts through the marketing and compares what actually matters: free tier limits, deployment experience, edge performance, and which platform to choose for your specific use case.

Free Tier Comparison at a Glance

Feature	Vercel	Netlify	Cloudflare Pages
Bandwidth	100 GB/month	100 GB/month	Unlimited
Build minutes	6,000 min/month	300 min/month	500 builds/month
Serverless functions	1M requests/month	125K requests/month	100K requests/day
Sites / projects	Unlimited	Unlimited	Unlimited
Custom domains	Unlimited	Unlimited	Unlimited
Edge locations	100+ PoPs	Global CDN	300+ PoPs
Preview URLs (PRs)	Yes	Yes	Yes
Commercial use (free)	No (Pro required)	Yes	Yes
Free tier price	Free (hobby only)	Free	Free

Key takeaway: Cloudflare Pages wins on raw limits (unlimited bandwidth, 300+ edge locations). Vercel wins on developer experience for React/Next.js. Netlify wins on ecosystem integrations and free forms.

Vercel: Best for Next.js and React

Vercel built Next.js — and it shows. Deploying a Next.js app on Vercel is the smoothest experience in frontend hosting. Server-side rendering, React Server Components, Edge Functions, and App Router all work out of the box with zero configuration.

Vercel Free Tier Limits (Hobby Plan)

Bandwidth: 100 GB/month — enough for a small to mid-traffic blog or SaaS landing page
Build minutes: 6,000/month — generous; a typical Next.js build takes 1–3 minutes
Serverless Functions: 1M invocations/month, 100 GB-hours compute, 10-second max duration
Edge Functions: 500K invocations/month, unlimited duration
Image optimization: 1,000 source images/month (the Next.js Image component uses this)

Important limitation: Vercel’s Hobby plan is for personal, non-commercial use only. If you’re building a commercial product — even a small SaaS — you technically need the Pro plan at $20/month per member. Netlify and Cloudflare Pages have no such restriction.

Deploy a Next.js App on Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy from your project directory
vercel

# Follow the prompts — it auto-detects Next.js
# Production URL is live in ~60 seconds

Or connect GitHub: every push to main auto-deploys. Every pull request gets a unique preview URL at your-project-<hash>.vercel.app.

Vercel Serverless Functions

// app/api/hello/route.ts (Next.js App Router)
export async function GET(request: Request) {
  return Response.json({ message: 'Hello from Vercel Edge!' });
}

// pages/api/hello.js (Pages Router)
export default function handler(req, res) {
  res.status(200).json({ name: 'Hello from Vercel' });
}

Functions deploy automatically with your Next.js app — no extra configuration needed. The 1M free invocations/month handles ~33K requests/day, which is plenty for most projects.

Netlify: Best for JAMstack and CMS Integration

Netlify pioneered the modern static hosting model in 2015 and remains the most feature-rich free tier for JAMstack sites. Where it stands out: built-in forms, split A/B testing, identity/auth management, and deep integrations with headless CMS platforms like Contentful, Sanity, and Strapi.

Netlify Free Tier Limits

Bandwidth: 100 GB/month
Build minutes: 300/month — the most restrictive of the three; a complex Gatsby or Hugo build can eat 5–10 minutes
Serverless Functions: 125,000 invocations/month, 100 GB-hours compute
Netlify Forms: 100 submissions/month — free form backend with spam filtering, no server required
Concurrent builds: 1 — you can’t run multiple builds simultaneously on the free tier

Deploy Any Static Site on Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy from build directory
netlify deploy --dir=./dist

# Deploy to production
netlify deploy --dir=./dist --prod

Netlify auto-detects frameworks: React, Vue, Svelte, Gatsby, Hugo, Jekyll, Astro. Set your build command and output directory once — Netlify handles the rest.

Netlify Functions (Serverless)

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Hello from Netlify Functions' }),
  };
};

Deploy to netlify/functions/ and the function is automatically available at /.netlify/functions/hello. No routing config needed.

Netlify Forms: Free Backend Without a Server

<!-- Add data-netlify="true" to any HTML form -->
<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <input type="text" name="name" placeholder="Your Name" />
  <input type="email" name="email" placeholder="Your Email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Netlify intercepts the form POST, stores submissions in their dashboard, and can send email notifications — completely free for up to 100 submissions/month. No backend code required.

Cloudflare Pages: Best for Global Performance and Unlimited Scale

Cloudflare Pages launched in 2021 as Cloudflare’s answer to Vercel and Netlify. Its differentiator: Cloudflare’s 300+ edge network, the world’s largest, combined with a genuinely unlimited free bandwidth tier.

Cloudflare Pages Free Tier Limits

Bandwidth: Unlimited — no overage charges, ever
Builds: 500 per month, 20,000 files per deployment
Pages Functions (serverless): 100,000 requests/day (free), same Workers runtime
Sites: Unlimited
Collaborators: Unlimited (vs. Vercel’s 1-person Hobby limit)
Commercial use: Yes — no hobby-only restriction

Deploy to Cloudflare Pages

# Install Wrangler CLI
npm install -g wrangler

# Login
wrangler login

# Deploy
wrangler pages deploy ./dist --project-name=my-site

Or connect via the Cloudflare dashboard: Pages → Create a project → Connect to Git. Cloudflare detects the framework and configures build settings automatically.

Cloudflare Pages Functions

Pages Functions use the same Workers runtime — V8 isolates, not Node.js. This means faster cold starts (sub-millisecond vs. ~100ms for Node Lambda) but a different API surface.

// functions/api/hello.js
export async function onRequestGet(context) {
  return new Response(JSON.stringify({ message: 'Hello from Cloudflare Pages Functions' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

File-based routing: functions/api/hello.js maps to /api/hello. No configuration needed.

Performance: How Fast Is Each Platform?

All three platforms use global CDN — static assets load fast everywhere. The differences show up in Time to First Byte (TTFB) for dynamic rendering and function cold starts:

Metric	Vercel	Netlify	Cloudflare Pages
Static asset TTFB	~20–50ms global	~20–50ms global	~10–30ms (300+ PoPs)
Function cold start	~50–100ms (Node.js)	~50–150ms (Node.js)	~0–5ms (V8 isolates)
Build speed (React app)	Fast (~1–2 min)	Medium (~2–4 min)	Fast (~1–2 min)
Edge locations	100+	Global CDN	300+

Cloudflare’s V8 isolate model eliminates cold starts entirely — Pages Functions start in microseconds, not milliseconds. For latency-sensitive APIs, this is a meaningful advantage.

Framework Support

Framework	Vercel	Netlify	Cloudflare Pages
Next.js	Native (built by Vercel)	Good (via adapter)	Partial (via @cloudflare/next-on-pages)
Remix	Good	Good	Excellent (official adapter)
Astro	Good	Good	Good
SvelteKit	Good	Good	Good (official adapter)
Gatsby	Good	Excellent	Good
Hugo/Jekyll	Good	Excellent	Good
Nuxt (Vue)	Good	Good	Good

Vercel’s edge over competitors is specifically for Next.js — React Server Components, App Router, and streaming all work perfectly because Vercel controls the framework. For anything else, all three platforms are roughly equivalent.

Add AI to Your Frontend with OpenClaw and Serverless Functions

All three platforms support serverless functions, which makes them excellent hosts for AI-powered frontends using OpenClaw. Deploy your static frontend to any of these platforms and use their serverless functions to call OpenClaw agents — keeping your API keys server-side while serving the UI globally.

Example: a Vercel API route that calls an OpenClaw agent to analyze user input:

// app/api/analyze/route.ts (Vercel, Next.js App Router)
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const { text } = await req.json();

  const response = await fetch('https://api.openclaw.ai/v1/run', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.OPENCLAW_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ task: `Analyze this text and summarize key points: ${text}` }),
  });

  const result = await response.json();
  return NextResponse.json(result);
}

The same pattern works on Netlify Functions and Cloudflare Pages Functions — just adapt to each platform’s runtime. The frontend calls /api/analyze and gets AI-powered results without exposing your API keys to the browser.

When to Choose Each Platform

Choose Vercel when:

You’re building with Next.js — Vercel’s native support is unmatched
You want the best developer experience (CI/CD, preview deployments, analytics)
Your project is personal/hobby (free tier commercial restriction applies)
You need React Server Components with zero configuration

Choose Netlify when:

You need built-in forms without a backend
You’re running a CMS-driven site (Contentful, Sanity, DatoCMS)
You want commercial use without paying
You need Netlify’s built-in identity/auth features for a JAMstack app
You have a Hugo, Jekyll, or Gatsby site — Netlify’s build support for these is excellent

Choose Cloudflare Pages when:

You need unlimited bandwidth — no surprises on bills
You’re already on Cloudflare for DNS/security
You need the lowest possible latency globally (300+ edge locations)
You’re building with Remix or SvelteKit (excellent adapters)
You need serverless functions with zero cold starts
You’re building a high-traffic site and don’t want bandwidth caps

The Paid Plans (When You Outgrow Free)

Plan	Vercel Pro	Netlify Pro	Cloudflare Pages Paid
Price	$20/month per member	$19/month per member	$5/month (Workers Paid plan)
Bandwidth	1 TB/month	400 GB/month	Unlimited
Build minutes	24,000/month	1,000/month	5,000/month
Functions	1M req/month	125K/month	10M req/month

Cloudflare’s $5/month Workers Paid plan offers the best value at scale — 10M function requests, unlimited bandwidth, and it powers both Workers and Pages Functions in the same account.

Final Verdict

There’s no single winner — it depends on your use case:

Next.js project: Use Vercel. The framework and platform are made by the same team, and it shows.
JAMstack with forms/CMS: Use Netlify. The ecosystem integrations are unmatched.
High traffic or unlimited bandwidth: Use Cloudflare Pages. No bandwidth caps, 300+ edge locations, and sub-millisecond function starts.
Commercial project on a budget: Netlify or Cloudflare Pages — both allow commercial use on the free tier. Vercel’s free plan is hobby-only.

For most static sites and frontends, you can start on all three for free and migrate later if needed. The good news: deploying to any of them takes under 5 minutes from a GitHub repo.

Originally published at toolfreebie.com.

DEV Community