Astro vs Next.js — A landing page showdown on Cloudflare.

The verdict: For a landing page, Astro wins. It ships near-zero JavaScript by default, hits perfect Lighthouse scores without effort, deploys to Cloudflare Pages as static assets — and after Cloudflare’s January 2026 acquisition of Astro, the integration is first-party.

A practical comparison of two philosophies — zero-JavaScript content delivery vs full React runtime — measured against the one constraint that matters for landing pages: how fast they load on a Cloudflare CDN.

---

Head-to-head

	Astro	Next.js
Approach	Static-first · Islands architecture	React runtime · App Router
JS shipped	~3 KB	~95 KB
Lighthouse	95–100	85–95
Build time	~30 s	~2–3 min
Cloudflare Pages	Native	Adapter required
Hosting cost	Free tier	Compute billed
Sweet spot	Content sites	Full apps

---

JavaScript shipped

Browser-bound JavaScript, gzipped, for an identical marketing landing page. Lower is faster, cheaper, and more battery-friendly on mobile.

• Astro · static — 3 KB
• Astro · one React island — 18 KB
• Next.js · App Router baseline — 95 KB
• Next.js · with hero + interactivity — 140 KB

The gap is roughly an order of magnitude. On a 4G connection, that translates directly into LCP and TTI.

---

Two philosophies

Astro · Islands

Every component renders to plain HTML on the server. Only components marked with client:visible or client:load get JavaScript. The pricing toggle ships React; the rest ships nothing.

• Hero → static HTML
• Features → static HTML
• Pricing toggle → hydrated
• Footer → static HTML

Next.js · React tree

Pages render on the server, but React must hydrate the entire tree to make any of it interactive. Server Components reduce the bill, but the runtime baseline never goes to zero.

<App>
├─ <Hero>
├─ <Features>
├─ <PricingToggle>
└─ <Footer>
+ React runtime · 80–120 KB

---

Cloudflare bought Astro in January

First-party framework status changes the math. Astro is now to Cloudflare what Next.js is to Vercel — the golden-path deployment target with the smoothest tooling.

$0 hosting cost. Static Astro deploys to Cloudflare Pages free, with unlimited bandwidth. No per-request compute charges for marketing traffic.

No adapter needed. Astro outputs static HTML. Drag the dist/ folder, or wire a Git repo to Pages. Next.js needs @cloudflare/next-on-pages and inherits Workers runtime constraints.

Edge-native SSR. When you do need SSR, the @astrojs/cloudflare adapter targets Workers directly. No cold starts, no Node compatibility caveats.

---

When to pick which

Reach for Astro when

• It’s a marketing page, landing page, blog, or docs site.
• Performance is a conversion KPI.
• The content is mostly static with a few interactive bits.
• You want to mix React, Vue, or Svelte in one project.
• The hosting bill must scale to zero at low traffic.
• SEO depends on Core Web Vitals.

Reach for Next.js when

• It’s an authenticated app surface, dashboard, or SaaS UI.
• You need complex data fetching with streaming and Suspense.
• You rely on Incremental Static Regeneration on a schedule.
• The marketing site shares components with the app.
• The team is already deep in the React ecosystem.
• You need real-time features or per-user rendering.

---

Ship it

Scaffold an Astro landing page:

# Scaffold an Astro landing page
npm create astro@latest my-landing

# Add Tailwind and React (only if you need islands)
npx astro add tailwind react

# Build static output to ./dist
npm run build

# Deploy: Cloudflare dashboard → Pages → Connect to Git
# Build command: npm run build  ·  Output: dist/

A minimal page — zero JS by default:

---
// src/pages/index.astro
import PricingToggle from '../components/PricingToggle.tsx';
---

<Hero />                              {/* static HTML */}
<Features />                          {/* static HTML */}
<PricingToggle client:visible />      {/* React loads on scroll */}
<Footer />                            {/* static HTML */}

---

The takeaway

The two frameworks aren’t really competing — they’re solving different problems. Next.js is a great answer when the app needs React end-to-end. Astro is the better answer when the page mostly needs to be read. For a landing page on Cloudflare in 2026, the choice writes itself.