Next.js vs Astro

Zero JS ships by default, nothing reaches the client unless you add an explicit client directive. Static HTML output is bare with no framework overhead.

Reasonable defaults via code splitting and native packages, but React runtime and RSC payload wire format add weight. Good performance requires intentional investment.

Static-first output consistently achieves 95-100 Lighthouse scores without manual tuning. No client hydration cycle means minimal layout shift.

Can be excellent with optimization but inconsistent across production sites. Large JS bundles continue to drag INP on data-heavy pages at the median.

The Islands Architecture requires explicit opt-in for every interactive component. No accidental framework runtime reaches the browser.

React Server Components reduce client JS versus the Pages Router, but the React runtime is unavoidable. No automatic JS budget enforcement, discipline is required.

The interactive cli scaffolds a working project in under 30 seconds, among the smoothest onboarding in the JS ecosystem.

The cli sets up TypeScript, ESLint, Tailwind, and App Router preferences in under two minutes, one of the best scaffolding experiences in the JS ecosystem.

Built-in with zero config required. Frontmatter and .ts files have strong inference; occasional gaps appear in .astro template slot types.

First-class throughout. Page, layout, route, and Server Action types are auto-inferred. Next.js 15 added typed route params with practically no boilerplate.

Vite-powered HMR is fast and responsive on typical projects. Very large content collections can slow the dev server as entry count grows.

Turbopack stable in v15 dramatically improved HMR but large codebases with many RSC boundaries still stall. Vite-based competitors feel faster on complex projects.

Error overlay improved substantially from v3 onward. Occasional cryptic errors appear with island hydration edge cases or adapter misconfigurations.

Improved error overlay in v14 and v15, but RSC-specific errors and wrong-context cookie calls can produce cryptic stack traces requiring framework internals knowledge.

Purpose-built as an SSG first. The Content Layer API in v5 unifies local files and remote data sources under a single type-safe schema.

Strong static generation via generateStaticParams and ISR. Understanding when a route is actually static requires knowing the caching model, which changed between versions.

Solid with official adapters for Vercel, Netlify, Cloudflare Workers, Node, and Deno. Some adapter edge cases lag behind the mature SSG story.

Industry-standard SSR with streaming, React Suspense, partial pre-rendering, and Edge Runtime. The most capable SSR framework in the React ecosystem.

Per-route prerender flags and Server Islands allow component-level static or dynamic mixing in the same project. Best-in-class granularity.

Individual route segments can be static, dynamic, or streamed in the same project at the layout level. No other framework offers this level of per-segment rendering control.

First-class official integrations with Sanity, Contentful, Storyblok, Prismic, and others. Content Layer API creates a unified type-safe interface for any remote source.

Every major headless CMS maintains official Next.js starters. Sanity, Contentful, Storyblok, and Prismic all treat Next.js as their primary integration target.

Draft and preview mode exists but live-preview for non-technical editors is less polished than Next.js Draft Mode. Area of active improvement.

Draft Mode works well with a preview API route and RSC data fetching. Clean per-CMS integration but still requires some custom wiring - not zero config.

File-based routing with dynamic routes, nested layouts, and a redirects config. No parallel or intercepting routes.

App Router supports nested layouts, route groups, parallel routes, intercepting routes, and loading or error conventions at every level. The most comprehensive file-system router available.

Top-level await in frontmatter naturally avoids waterfalls for static builds. No built-in client-side fetch primitive - wire that in yourself inside islands.

RSC fetch with cache tags and revalidateTag is architecturally elegant, but the caching model changed defaults between v13, v14, and v15 - a major recurring pain point.

Server endpoints handle simple APIs, form handling, and webhooks cleanly. Not a substitute for a dedicated backend in complex applications.

Route Handlers and Server Actions cover external APIs and form mutations cleanly once you understand which to use when. The separation is logical but takes time to internalize.

Content Collections and schema enforcement keep content codebases organized. The component model stays readable as the project grows.

App Router colocation of page, layout, loading, and error scales well. Server and client component boundaries require discipline to keep architecture clean on large teams.

v3 to v4 to v5 migrations have been smooth with automated codemods and detailed guides. Consistently low upgrade pain compared to other frameworks.

Pages Router to App Router was a full paradigm shift. Cache behavior changed between minor versions. Many teams stay multiple majors behind by necessity.

.astro files are HTML with a JavaScript frontmatter block. Any developer who knows HTML and basic JS can read and maintain them without deep framework knowledge.

React developers can read page components, but RSC, async layouts, and cache segment config require dedicated onboarding. Less accessible than standard React for handoff.

Official adapters for Vercel, Netlify, Cloudflare, Node, Deno, and AWS Lambda. Static output deploys anywhere that hosts files with no platform lock-in.

Works well on Railway, Render, Fly.io, and self-hosted Node. Some advanced features like ISR and Edge Middleware require Vercel or a host implementing the Build Output API spec.

Vite-powered builds are fast for typical sites. Very large sites with 10,000+ pages can slow without incremental build support, not yet available natively.

Turbopack stable for dev in v15 dramatically improved local iteration. Production builds still use Webpack and can reach 5-10 minutes on large codebases.

Static output means near-zero CDN costs at virtually any scale. SSR workloads are lightweight with no runtime framework overhead consuming compute.

Vercel is generous on small projects but serverless invocations, edge compute, and bandwidth bill separately at scale. Self-hosting on a VPS significantly reduces cost.

Astro's designed target. Performance, SEO, CMS integration, and content workflow all converge here - the strongest framework choice for marketing and content sites.

Solid choice especially with a headless CMS. More JS runtime overhead can affect CWV on pure content pages, but excellent for sites with interactive elements.

Not designed for SPAs or complex stateful applications. Sharing state across islands requires external stores and the architecture resists app-like patterns.

Best-in-class for complex React applications. Auth, streaming, caching, Server Actions, and edge deployment all compose well for SaaS and dashboard use cases.

Individual interactive components work well as isolated islands. Complex coordinated interactivity creates friction because islands do not share a component tree.

RSC plus Client Components is architecturally correct for selective hydration. Context providers and animation libraries often force large client subtrees - requires discipline.