React vs Astro: quale framework scegliere?

Ho usato React per anni. Poi ho scoperto Astro. Ora uso entrambi, ma in contesti diversi.

Questa non è una battaglia “quale è meglio”. Sono strumenti diversi per problemi diversi. La domanda giusta è: quale è meglio per il TUO progetto?

React in breve

React è una libreria JavaScript per costruire interfacce utente interattive. Tutto avviene nel browser (o sul server con Next.js).

Punti di forza:

• Ecosistema enorme
• Perfetto per web app complesse
• Interattività nativa
• Molti developer lo conoscono

Punti deboli:

• JavaScript pesante
• Overkill per siti statici
• Più complesso da configurare
• Performance non ottimali out-of-the-box

Astro in breve

Astro è un framework per siti content-focused. Di default genera HTML statico, zero JavaScript nel browser.

Punti di forza:

• Performance incredibili
• Zero JavaScript di default
• Può usare React quando serve (islands architecture)
• Ottimo per SEO

Punti deboli:

• Ecosistema più piccolo
• Non adatto per web app complesse
• Curva di apprendimento se vieni da React

Quando usare React

1. Web app con molta interattività

Dashboard, tool, SaaS, CRM. Quando l’utente passa tempo sull’app e interagisce costantemente.

Esempio: Dashboard analytics con grafici che si aggiornano in real-time, filtri multipli, export dati.

React brilla qui perché tutto lo stato è gestito client-side, l’interazione è fluida, non ci sono reload.

2. Quando serve ecosistema React

Se hai bisogno di librerie specifiche che esistono solo per React (chart library complesse, form builder avanzati), allora React è obbligato.

3. Team già esperto in React

Se hai un team che sa React ma non Astro, il costo di switch potrebbe non valere. A meno che il progetto non benefici MOLTO da Astro.

Quando usare Astro

1. Siti content-focused

Blog, documentazioni, siti marketing, portfolio, landing page.

Quando il contenuto è statico o cambia poco. Quando performance e SEO sono critici.

Esempio: Questo stesso sito è in Astro. Content statico, poca interattività, serve che carichi velocissimo per SEO.

2. Quando performance è priorità #1

Astro genera HTML puro. Niente bundle JavaScript pesanti. Lighthouse 100/100 è la norma.

Google premia la velocità. Se vuoi rankare, Astro ti dà un vantaggio.

3. Quando hai mix di contenuto statico + isole interattive

Astro ti permette di avere pagine statiche con isole React dove serve interattività. Best of both worlds.

Confronto tecnico (numeri reali)

Ho fatto test su un progetto identico in entrambi i framework:

Progetto: Landing page con hero, features, pricing, blog (10 articoli)

React (Next.js)

• Bundle size: 250KB (gzipped)
• First Contentful Paint: 1.2s
• Lighthouse Performance: 78/100
• Time to Interactive: 2.8s

Astro

• Bundle size: 15KB (gzipped)
• First Contentful Paint: 0.4s
• Lighthouse Performance: 100/100
• Time to Interactive: 0.6s

La differenza è enorme. Astro è ~17x più leggero e ~5x più veloce.

Developer Experience

React/Next.js:

// Tutto è JavaScript, pattern familiare
export default function Page() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Astro:

---
// Script eseguito a build time
const count = 0;
---

<div>
  <h1>Count: {count}</h1>
  <!-- Per interattività, usi un'isola React -->
  <Counter client:load />
</div>

Astro richiede cambio di mindset. Ma una volta capito, è più semplice per siti content-focused.

Islands Architecture (il game changer)

Astro ha una feature killer: le islands.

Puoi avere 95% del sito in HTML statico, e il 5% che serve interattività lo fai con React (o Vue, Svelte, etc).

Esempio pratico:

Landing page in Astro (statico, velocissimo). Ma il form di contatto è un’isola React per validazione client-side.

---
import ContactForm from '../components/ContactForm.tsx';
---

<section>
  <h1>Contattami</h1>
  <!-- Questo carica React solo per il form -->
  <ContactForm client:visible />
</section>

Il resto della pagina? Zero JavaScript. Solo il form ha React.

Hosting e deployment

React/Next.js:

Serve Node.js server o hosting specializzato (Vercel, Netlify). Più complesso, più costoso.

Astro:

HTML statico. Hosting su qualsiasi CDN (Cloudflare Pages, Netlify, Vercel, GitHub Pages). Più semplice, più economico.

Se hai 100 siti come me, la differenza di costo è significativa. Astro mi fa risparmiare €500-1000/mese di hosting.

SEO e performance

Google premia la velocità. Core Web Vitals sono un ranking factor.

Astro = SEO facile:

• HTML statico = crawl perfetto
• Velocità nativa = buoni Core Web Vitals
• Zero JavaScript = niente problemi rendering

React = SEO più complesso:

• Serve SSR (Next.js) per crawling decente
• Bundle JavaScript pesa su performance
• Più ottimizzazioni manuali

Se SEO è critico, Astro ha un vantaggio inherente.

Casi d’uso reali dal mio portfolio

Progetto 1: Dashboard SaaS

Framework: Next.js + React
Perché: Interattività costante, real-time updates, stato complesso

Progetto 2: Blog tecnico

Framework: Astro
Perché: Contenuto statico, performance critica per SEO

Progetto 3: Sito e-commerce

Framework: Astro + React islands
Perché: Pagine prodotto statiche (Astro), carrello interattivo (React island)

Progetto 4: Landing page SaaS

Framework: Astro + React islands
Perché: Contenuto statico, form e demo interattivi con React

La risposta è: entrambi

Non è “o React o Astro”. È “quando React e quando Astro”.

Usa React quando:

• Web app con interattività pesante
• Dashboard, tool, piattaforme
• Real-time features
• Team già esperto React

Usa Astro quando:

• Siti content-focused
• Performance e SEO sono critici
• Contenuto prevalentemente statico
• Vuoi mix statico + isole interattive

Usa Astro + React islands quando:

• Sito principalmente statico
• Alcune parti richiedono interattività
• Vuoi performance top + features React

Il mio consiglio

Se inizi un progetto nuovo oggi:

È un blog, documentazione, landing page, sito marketing? → Astro

È una web app, dashboard, tool complesso? → Next.js + React

È un e-commerce, sito con alcune feature interattive? → Astro + React islands

Imparare Astro se sai React

Se sai React, Astro è facile da imparare. In 2-3 giorni sei produttivo.

Concetti chiave:

• Componenti .astro invece di .jsx
• Script section eseguito a build time
• Islands per interattività
• Routing basato su file system

Il mindset è diverso (server-first invece di client-first), ma non è difficile.

Performance conta davvero?

Sì. Tanto.

Per SEO: Google premia siti veloci. Astro ti dà vantaggio nativo.

Per conversioni: Ogni 100ms di delay = -1% conversioni. Siti veloci convertono meglio.

Per costi: Astro = hosting statico economico. React = server Node.js più costoso.

Se gestisci molti siti, la differenza di performance e costo è enorme.

Conclusione pratica

Non è “React vs Astro”. Sono strumenti complementari.

Io uso entrambi. 70% dei miei progetti sono in Astro (siti content), 30% in React (web app).

Prossimo progetto? Chiediti:

1. È principalmente contenuto o app?
2. Quanto è critica la performance?
3. Quanto JavaScript serve davvero?

Le risposte ti diranno quale scegliere.

Se vuoi una consulenza su quale stack usare per il tuo progetto, contattami.

---

TL;DR

• React: Web app, interattività pesante, team React
• Astro: Siti content, performance critica, SEO importante
• Astro + React: Best of both worlds, siti con isole interattive

La scelta giusta dipende dal progetto, non dalle preferenze.