← Tools I Use

Astro vs Next.js vs SvelteKit for content sites in 2026

2026-05-24 · ~7 min read · Conor Dobbs

I have content sites running on all three. A portfolio on Astro, a SaaS marketing site on Next.js 15 (App Router), and a Mother's Day microsite on SvelteKit. Here's the honest decision tree.

The honest summary

For pure content (blog, portfolio, marketing, docs): Astro. It generates static HTML by default, ships almost no JS, and has the best content authoring DX of the three.

For content + complex app behavior in the same site (auth-gated content, dynamic dashboards mixed with marketing): Next.js 15 App Router. Server Components let you compose static + interactive without picking a side.

For content sites where you want minimal JS + maximum interactivity polish + you already know Svelte: SvelteKit. Svelte 5 runes are genuinely a nicer authoring experience than React for most components.

Where Astro wins

Zero JS by default. Astro components render to HTML at build time. The browser downloads ~0KB of JS unless you specifically opt into hydration. For a blog, this means your Lighthouse score is 99-100 without trying. For Next.js or SvelteKit, you have to actively fight to get there.

Multi-framework islands. You can write a React component, a Svelte component, AND a Vue component on the same page. Each is hydrated independently if needed. Niche but useful for content-heavy sites where you want one specific interactive piece (a calculator widget, a video player) without committing the whole site to that framework.

Content collections. Astro 4's content collections give you typed frontmatter + content schemas for your markdown. Write a blog post, get autocomplete + validation. Next.js has nothing equivalent built-in. SvelteKit requires manual setup.

The build output is just HTML + a tiny runtime. You can host on any static host (CF Pages, Vercel, Netlify, GitHub Pages, S3). No serverless function limits to worry about.

Where Next.js 15 wins

Server Components compose better than alternatives. If half your site is static content and half is auth-gated app behavior, App Router lets you mix freely. A page can render a Server Component (DB read at request time) AND a Client Component (interactive form) in the same tree. Astro and SvelteKit both make this clunkier.

The Vercel deploy story. One git push, everything optimized. ISR, image optimization, font subsetting, edge functions, preview deploys per PR — all configured for you. If you're deploying to Vercel, Next.js is the path of least resistance.

Ecosystem maturity. Want auth, payments, CMS integration, analytics — there's a Next.js-shaped library for it. Astro and SvelteKit have most things but the long tail is shorter.

Streaming with Suspense. If part of your page is slow (DB query, external API), Next.js can stream the fast parts immediately + suspend the slow parts behind skeletons. SvelteKit has streaming too but the API is less ergonomic. Astro doesn't really do streaming.

Where SvelteKit wins

Less JS than Next.js by default. Svelte compiles components to highly optimized vanilla JS — no virtual DOM, no React runtime. A SvelteKit site is usually 30-50% smaller bundle than the equivalent Next.js site.

Svelte 5 runes are the best component model. Hot take. After writing React for years and Svelte 5 for a few months, I find runes ($state, $derived, $effect) more readable than React hooks. No dependency arrays. No "did I forget to memoize this" anxiety. State just works.

Form actions are the cleanest mutation pattern. Progressive-enhancement by default. Works without JS. use:enhance upgrades to fetch + invalidates loads automatically. Cleaner than Next.js Server Actions for most form work.

Adapter flexibility. SvelteKit has first-class adapters for CF Pages, Vercel, Netlify, Node, static. Switching deploy targets is a 1-line config change. Next.js's non-Vercel deploys work but are second-class.

The cost reality

All three are free open-source frameworks. The cost is in deploy + dev-tool subscriptions:

For pure content sites, the Astro + Cloudflare combo is the cheapest by a wide margin.

The decision tree I actually use

Blog, portfolio, marketing, docs, anything mostly content: Astro.

SaaS with mixed marketing + app behavior, deploying to Vercel: Next.js 15 App Router.

Microsite where Svelte expressiveness matters + bundle size matters + you know Svelte: SvelteKit.

Multi-page brochure site for a client: Astro. Always Astro. No JS = no maintenance debt.

App with a real backend + complex state + a team that already does React: Next.js 15.

What I actually do

Astro for content sites. Next.js for SaaS marketing + app. SvelteKit for microsite + holiday-card-style projects where I want the polish without the React ceremony.

The mistake I see most often: people pick Next.js for a blog. Next.js for a blog is overkill — the result is a 2MB JS bundle for a page that could've been 12KB of HTML. Astro for content; Next for apps; both is fine.

If you're using Cursor

I shipped a Cursor cookbook with MDC rules for each of these — stops Cursor from generating Pages Router code on Next 15, stops it from generating Svelte 4 patterns on Svelte 5, teaches Astro's content collection schema. Available on my Gumroad.

Links