Tecnologie

Next.js vs Astro nel 2026: quale framework scegliere per il tuo sito

Next.js vs Astro 2026: differenze reali, performance, costi, ecosistema. Quando uno batte l'altro. Casi studio AImpact (Astro) e Colao (Next.js).

Stefano Prandi — 2026-06-22

"Next.js o Astro?" è una delle domande che ricevo più spesso da quando StepDesign è online. Imprenditori, colleghi designer, sviluppatori junior: tutti vogliono sapere quale framework sia "il migliore" per fare un sito moderno nel 2026. La risposta onesta è scomoda: dipende da cosa stai costruendo, e nel 99% dei casi chi te lo chiede in realtà sta facendo la domanda sbagliata.

Io uso entrambi, in parallelo, su progetti reali. Next.js per il sito del Prof. Fernando Colao (medico ortopedico, contenuti gestiti da CMS, prenotazioni, area pazienti in roadmap). Astro per AImpact (archivio tecnico AI 2020+, bilingue IT/EN, contenuto puro, performance maniacali). Stessa famiglia React, due filosofie opposte, due risultati eccellenti. Vediamo perché.

Astro: il framework che manda zero JavaScript

Astro è nato nel 2021 con un'idea apparentemente folle: la maggior parte dei siti web non ha bisogno di JavaScript. Un blog, una landing, un portfolio, un magazine: sono il 90% del web e sono contenuto. Eppure usiamo framework che spediscono al browser 200-500 KB di JS solo per mostrare paragrafi e immagini. Astro ha invertito il default: zero JavaScript di base, e tu decidi caso per caso dove serve davvero.

Multi-framework: usa quello che vuoi

A differenza di Next.js, Astro non ti sposa con React. Puoi scrivere componenti in:

React (il più usato, ecosistema enorme)
Vue 3
Svelte / SvelteKit-style
Solid
Preact (versione leggera di React)
Lit (Web Components)
O niente: solo file .astro con sintassi simile a JSX ma compilata in HTML statico

In pratica si scrive quasi sempre in .astro per la struttura, e si tira fuori React (o altro) solo per le "isole" interattive: un form, un carosello, una mappa, un widget di prenotazione. Tutto il resto resta HTML puro.

Islands Architecture: l'idea che cambia le regole

Il pattern si chiama islands architecture. La pagina è un mare di HTML statico, con piccole isole di interattività che si idratano (cioè diventano JavaScript funzionante) solo quando servono. Puoi decidere se un'isola si carica:

subito (client:load)
quando il browser è idle (client:idle)
quando entra nel viewport (client:visible)
solo su certi media query (client:media)
mai sul server, solo lato client (client:only)

Questo significa che un articolo con 5 form interattivi può spedire al browser solo il JavaScript di quei 5 form, non tutto il framework. Risultato: bundle minuscoli, LCP sotto il secondo, INP eccellente.

Pro di Astro

Performance out-of-the-box. PageSpeed 95-100 senza ottimizzare nulla.
MDX nativo. Scrivi articoli in Markdown estesi con componenti React/Vue. Perfetto per blog tecnici.
Content Collections. Sistema di tipi TypeScript per gestire raccolte di contenuti (blog, prodotti, FAQ) con validazione Zod automatica.
Curva di apprendimento dolce. Se conosci HTML e un po' di React, in due ore sei produttivo.
Build veloci. Sito da 200 pagine si compila in 10-15 secondi.

Contro di Astro

Niente SSR dinamico complesso. Puoi farlo, ma non è il suo punto forte. Se ti serve streaming SSR con dati live a ogni richiesta, Next.js è più maturo.
Ecosistema più piccolo. Plugin, integrazioni e tutorial sono molti meno rispetto a Next.js.
Auth e API integrate sono basilari. Puoi farle, ma non hai la stessa esperienza built-in di Next.js (Server Actions, middleware avanzati).
Meno adatto a "vere" web app. Dashboard, gestionali, SaaS: tecnicamente possibili, in pratica forzature.

Next.js 15: il framework full-stack di Vercel

Next.js è il framework React di riferimento, sviluppato da Vercel. Nel 2026 siamo alla versione 15+, con App Router, React Server Components (RSC), Turbopack come bundler di default, Server Actions stabili e un'esperienza full-stack che non ha rivali nell'ecosistema JavaScript.

App Router e React Server Components

L'App Router è il nuovo modo (ormai standard) di organizzare un'app Next.js. Ogni cartella in app/ diventa una route, e ogni page.tsx è di default un Server Component: viene renderizzato sul server, accede al database direttamente, e spedisce al browser solo l'HTML risultante. Niente API intermedie, niente data fetching client-side, niente waterfall.

Vuoi interattività? Aggiungi "use client" in cima a un componente: diventa un Client Component classico, idratato come una qualsiasi app React. Puoi mescolare i due tipi liberamente, e Next.js si occupa di mandare al browser solo il JavaScript dei componenti client.

Modalità di rendering: SSG, SSR, ISR

Next.js 15 supporta tutte le strategie possibili nello stesso progetto:

SSG (Static Site Generation): pagine generate al build, servite come HTML statico.
SSR (Server-Side Rendering): generate a ogni richiesta sul server.
ISR (Incremental Static Regeneration): statiche, ma rigenerate periodicamente in background.
PPR (Partial Pre-Rendering): la parte statica viene servita subito, la parte dinamica streama dopo. Killer feature del 2026.

Pro di Next.js

Full-stack vero. Frontend, API, autenticazione, database, file upload: tutto in un solo progetto.
Server Actions. Form e mutazioni senza scrivere API REST: chiami una funzione lato server come fosse locale.
Ecosistema React. Tutto ciò che esiste per React funziona in Next.js: Radix UI, shadcn/ui, Tanstack Query, Framer Motion.
Vercel. Hosting one-click ottimizzato per Next.js, con preview deploy, edge functions e analytics integrate.
Maturità. Documentazione enorme, community gigantesca, tutorial per ogni caso d'uso.

Contro di Next.js

Overhead JavaScript. Anche un sito "semplice" parte con ~80-120 KB di JS minimo (runtime React + framework). Astro parte da 0.
Complessità. App Router, RSC, Server Actions, layouts annidati, parallel routes, intercepting routes: tanto potere, tanta confusione per i principianti.
Lock-in moderato su Vercel. Funziona ovunque, ma molte feature (ISR fine-grained, immagini, edge) brillano davvero solo lì.
Build time. Su progetti grandi (1000+ pagine, RSC complessi) le build possono diventare lente.

Tabella di confronto

| Caratteristica | Astro | Next.js 15 | |---|---|---| | Build time (100 pagine) | ~10 sec | ~30-60 sec | | JS runtime out-of-box | 0 KB | ~80-120 KB | | Ecosistema React | Compatibile | Nativo | | Multi-framework | Sì (React, Vue, Svelte, Solid...) | Solo React | | SSR dinamico | Buono | Eccellente | | API routes | Sì (basiche) | Sì (avanzate, Server Actions) | | Dev experience | Semplice, snella | Potente, complessa | | Curva apprendimento | 2-3 giorni | 2-3 settimane | | Hosting consigliato | Cloudflare Pages, Netlify | Vercel, self-host Node | | Core Web Vitals di base | 95-100/100 | 75-90/100 (ottimizzabile) | | Casi ideali | Blog, vetrine, landing, portfolio, magazine | Dashboard, e-commerce, SaaS, CMS-heavy |

Quando Astro vince: il caso AImpact

AImpact è un mio progetto personale: un archivio tecnico di tutto ciò che è successo nell'AI dal 2020 in poi, bilingue italiano/inglese, con un toggle che cambia il livello di approfondimento tecnico dell'intero articolo. Centinaia di pagine, contenuto puro, MDX con componenti interattivi inseriti dove servono (grafici timeline, comparazioni modelli, citazioni espandibili).

Perché Astro era la scelta giusta:

Contenuto in MDX. Ogni articolo è un file .mdx versionato in Git. Modifica via GitHub, deploy automatico.
Bilingue senza framework pesanti. Una semplice struttura di cartelle it/ e en/ con routing automatico.
Performance maniacali. LCP a 0.6s, INP a 40ms, bundle JS sotto i 30 KB su pagine senza isole interattive.
Hosting gratis. Deploy su 192.168.0.125 self-hosted, ma su Cloudflare Pages costerebbe 0€.
Build veloci. L'intero sito si rigenera in 12 secondi. Lo stesso progetto in Next.js richiederebbe minuti.

Su AImpact non c'è autenticazione, non c'è database live, non ci sono prenotazioni. È contenuto. Astro brilla esattamente lì.

Altri casi tipici dove Astro è la scelta giusta:

Blog professionali (come questo che stai leggendo)
Siti vetrina aziendali medi (10-50 pagine)
Portfolio designer e fotografi
Magazine e siti editoriali
Documentazione tecnica
Landing page singole o multiple
Siti istituzionali statici

Quando Next.js vince: il caso Colao

Il sito del Prof. Fernando Colao è un sito istituzionale ortopedico per Firenze e Roma. Sulla carta sembrerebbe un caso da Astro: pagine vetrina, contenuto medico, palette curata. Eppure ho scelto Next.js. Perché?

Sanity CMS integrato. I contenuti medici vengono aggiornati frequentemente dallo studio. Next.js + Sanity con ISR significa che ogni modifica si propaga in pochi secondi senza rebuild manuali.
Prenotazioni in roadmap. Il piano è integrare entro fine anno un sistema di booking con calendario, conferme email, area pazienti. Auth + database + API: terreno nativo di Next.js.
SEO locale dinamico. Pagine per città/specializzazione generate via ISR da dati Sanity, con fallback dinamico per nuove specializzazioni.
Ecosistema Framer Motion. L'estetica premium (avorio + oro brunito, animazioni fluide) si appoggia pesantemente su Framer Motion: 100% compatibile con Next.js, in Astro andrebbe forzato in isole client.

Su Colao serve una piattaforma che cresca con il cliente. Next.js è un investimento sul futuro.

Altri casi tipici dove Next.js è la scelta giusta:

E-commerce di qualsiasi dimensione
Dashboard amministrative (Preventivi Pro, ad esempio)
SaaS e gestionali B2B
App con autenticazione e ruoli
Marketplace, prenotazioni, booking
Siti con CMS aggiornato di frequente e ISR
Progetti dove il sito è parte di un prodotto digitale più ampio

Migrare tra i due (è meno doloroso di quanto pensi)

Astro e Next.js sono più vicini di quanto sembri. Entrambi supportano React, entrambi usano file-based routing, entrambi hanno componenti server-side. Migrare un blog Astro → Next.js significa principalmente:

Trasformare componenti .astro in .tsx
Sostituire frontmatter Astro con getStaticParams + generateMetadata
Riscrivere il content layer (Content Collections → manuale o next-mdx-remote)

Migrare Next.js → Astro è ancora più semplice se il progetto era prevalentemente statico: rimuovi il runtime React, sposti i componenti interattivi in isole, e ti ritrovi un bundle molto più leggero.

In entrambi i casi, il contenuto Markdown/MDX viaggia praticamente identico. Per questo blog, scegliere uno o l'altro non è un matrimonio per la vita: è una scelta tecnica reversibile in poche settimane di lavoro.

Hosting consigliato

L'hosting non è un dettaglio: cambia costi, performance e developer experience.

Per Next.js: Vercel resta lo standard de facto. Tier free generoso, deploy automatico da Git, edge network globale, ISR ottimizzata, Server Actions di prima classe, analytics integrate. Per progetti grandi si passa al piano Pro (20$/mese per utente). Alternative: self-host Node con PM2 o Docker, Cloudflare Workers (con @opennextjs/cloudflare), Netlify.

Per Astro: Cloudflare Pages è la mia prima scelta nel 2026. Gratis fino a numeri molto generosi, CDN globale incluso, build veloci, supporto SSR via Workers. Alternative: Netlify (storicamente solido), Vercel (funziona benissimo anche per Astro), self-host su qualsiasi server con un nginx o un Caddy. Astro genera HTML statico: lo metti dove vuoi.

Sul costo reale: un sito Astro in produzione costa 0-5€ al mese. Un sito Next.js può costare 0-20€/mese in tier gratuiti, fino a 50-100€/mese su progetti grandi self-hosted con database e storage. Approfondisco i costi in quanto costa l'hosting di un sito web nel 2026.

Conclusione: scegli il framework dopo aver definito il progetto

L'errore più frequente che vedo è scegliere il framework prima di capire cosa serve davvero. "Voglio Next.js perché è famoso" o "voglio Astro perché è veloce" sono partenze sbagliate. La domanda giusta è: il mio sito è prevalentemente contenuto o è prevalentemente applicazione?

Se è contenuto (blog, vetrina, portfolio, landing), Astro ti regala performance da campionato senza sforzo.
Se è applicazione (dashboard, e-commerce, SaaS, CMS-heavy), Next.js ti dà un ecosistema full-stack maturo.
Se è ibrido, sceglilo in base alla parte che pesa di più nel medio termine.

Per approfondire l'aspetto velocità che pesa moltissimo sul posizionamento, leggi siti statici vs WordPress sulla velocità e Core Web Vitals spiegati semplice.

Stai pensando a un nuovo sito e non sai quale framework scegliere? Su stepdesign.prandi.net trovi i miei progetti reali in entrambi i framework. Scrivimi: in 20 minuti di chiamata gratuita capiamo insieme se ti serve Astro, Next.js, o qualcos'altro ancora. Niente lock-in, niente forzature: il framework giusto è quello che serve al tuo progetto, non quello di moda.

FAQ

Astro è meglio di Next.js?

Dipende dal caso. Astro vince su siti contenuto-centrici (blog, vetrine, landing, portfolio): manda zero JavaScript di default e ottiene Core Web Vitals quasi perfetti senza ottimizzazioni. Next.js vince su applicazioni dinamiche (dashboard, e-commerce complessi, CMS-heavy, auth, API), dove ti serve un vero backend integrato con React Server Components. Non c'è un vincitore assoluto: c'è il framework giusto per il progetto.

Next.js richiede React obbligatoriamente?

Sì, Next.js è costruito su React e non puoi usarne un altro. Astro invece è agnostico: ti permette di usare React, Vue, Svelte, Solid, Preact o anche niente (solo HTML/CSS). Puoi persino mischiare framework diversi nello stesso progetto Astro, anche se in pratica nessuno lo fa. Questa libertà è uno dei motivi per cui Astro piace ai web designer freelance: non ti costringe a un ecosistema.

Astro è solo per siti statici?

No, è il malinteso più comune. Astro nasce come Static Site Generator ma da Astro 3+ supporta perfettamente SSR (Server-Side Rendering) on demand, ibridazione (alcune route statiche, altre dinamiche), API routes e middleware. Il suo modello islands permette di avere componenti interattivi React/Vue dentro pagine altrimenti statiche, idratati solo quando servono. È statico per default, dinamico quando serve.

Quale framework è più veloce nei Core Web Vitals?

Astro out-of-the-box. Manda zero JavaScript di default, quindi LCP e INP sono praticamente perfetti senza dover ottimizzare nulla. Un sito Astro medio sta sopra i 95/100 su PageSpeed senza sforzo. Next.js può raggiungere gli stessi punteggi ma richiede attenzione: scelta tra Server e Client Components, lazy loading, bundle splitting manuale, gestione delle font. Più potenza, più responsabilità.

Quale framework usano i web designer freelance nel 2026?

La distribuzione del mercato professionale italiano nel 2026 è circa: 45% Next.js (vince nei progetti business e e-commerce), 25% Astro (in forte crescita su content e portfolio), 15% altri framework moderni (SvelteKit, Nuxt, Remix), 15% ancora WordPress headless o tradizionale. Astro sta erodendo quota soprattutto sui blog professionali e sui siti vetrina premium, dove la velocità conta più dell'interattività.

Richiedi un preventivo