Astro Framework: Costruire Siti Ultra-Veloci Che Ottengono 100 su Lighthouse

Perche la Velocita del Sito Conta Ancora Piu di Quanto la Maggior Parte dei Team Realizzi

Google misura la velocita dei siti web dal 2010 e la usa come fattore di ranking. I Core Web Vitals sono diventati un segnale di ranking ufficiale nel 2021. Ogni 100 millisecondi di tempo di caricamento aggiuntivo riduce i tassi di conversione in media del 7%, secondo una ricerca di Akamai. Gli utenti mobile su connessioni 3G in Svizzera rappresentano ancora una quota significativa del traffico al di fuori delle aree urbane come Lugano e Zurigo.

Nonostante questo, la maggior parte dei siti web aziendali invia centinaia di kilobyte di JavaScript che il browser deve scaricare, analizzare ed eseguire prima che la pagina diventi interattiva. Un tipico sito Next.js o Gatsby, anche una semplice pagina marketing, invia 200-500 KB di JavaScript al browser. La maggior parte di quel JavaScript gestisce l'idratazione del framework, non le interazioni reali dell'utente.

Astro e stato costruito per risolvere questo problema. E un framework web content-first che non invia JavaScript per impostazione predefinita. Aggiungi JavaScript solo dove hai bisogno di interattivita. Il risultato: siti che ottengono costantemente 100/100 su Google Lighthouse, si caricano in meno di 1 secondo e si posizionano meglio grazie a questo.

Cos'e Astro

Astro e un framework web open-source progettato per siti web ricchi di contenuti. E stato creato da Fred Schott e dal team dietro Snowpack (un tool di build). La prima versione stabile (Astro 1.0) e stata lanciata nell'agosto 2022.

Il principio fondamentale e semplice: renderizza tutto in HTML statico al momento del build. Se un componente non ha bisogno di essere interattivo, diventa puro HTML con zero JavaScript. Se un componente ha bisogno di interattivita (un form, un carosello, un carrello), carica il suo JavaScript solo quando necessario.

Questo approccio si chiama "architettura a isole" ed e la caratteristica distintiva che separa Astro dagli altri framework.

L'Architettura a Isole Spiegata

In un'applicazione single-page tradizionale (SPA), l'intera pagina e controllata da JavaScript. Il browser scarica un bundle JavaScript, e quel bundle renderizza l'intera pagina, gestisce il routing, gestisce lo stato e risponde alle interazioni dell'utente. Anche una sezione completamente statica come un header o footer e gestita dal framework.

In Astro, la pagina e HTML statico per impostazione predefinita. I componenti interattivi sono "isole" di JavaScript incorporate in un mare di HTML statico. Ogni isola si carica indipendentemente, si idrata indipendentemente, e puo usare un framework UI diverso dai suoi vicini.

Come Funziona in Pratica

Considera una tipica pagina marketing con una sezione hero, descrizioni di feature, un carosello di testimonianze e un modulo di contatto. In Next.js, l'intera pagina si idrata come applicazione React. In Astro:

• La sezione hero si renderizza come HTML statico. Nessun JavaScript necessario.
• Le descrizioni delle feature si renderizzano come HTML statico. Nessun JavaScript necessario.
• Il carosello di testimonianze e un'isola interattiva. Carica il suo JavaScript quando il componente scorre nel viewport (usando client:visible).
• Il modulo di contatto e un'isola interattiva. Carica il suo JavaScript quando la pagina si carica (usando client:load).

Il risultato: invece di inviare 200 KB di JavaScript per l'intera pagina, invii forse 15 KB in totale, solo per i componenti che ne hanno bisogno. La pagina si carica istantaneamente, il punteggio Lighthouse e 100, e i motori di ricerca vedono HTML completamente renderizzato alla prima richiesta.

Direttive di Idratazione

Astro fornisce diverse direttive client per controllare quando le isole si idratano:

• client:load - Idrata il componente immediatamente al caricamento della pagina.
• client:idle - Idrata quando il browser e inattivo.
• client:visible - Idrata quando il componente scorre nel viewport.
• client:media - Idrata quando una media query corrisponde.
• client:only - Salta il rendering server e renderizza solo sul client.

Nessuna direttiva significa nessun JavaScript. Il componente si renderizza come HTML statico e resta cosi.

Zero JavaScript per Impostazione Predefinita

Questo merita enfasi perche e controintuitivo per gli sviluppatori che vengono da ambienti React o Vue. In Astro, se scrivi un componente e non aggiungi una direttiva client:, invia zero JavaScript al browser. Il componente gira al momento del build, genera HTML, e quell'HTML e cio che il browser riceve.

Puoi scrivere componenti usando la sintassi JSX, usare props, importare dati, chiamare API al momento del build e usare logica nei template. Tutto questo gira durante il processo di build. L'output e puro HTML e CSS.

Per un sito web di contenuti (blog, sito marketing, documentazione, catalogo e-commerce), la stragrande maggioranza del contenuto e statico. Menu di navigazione, header, footer, contenuto degli articoli, descrizioni dei prodotti, gallerie di immagini: nessuno di questi ha bisogno di JavaScript. Sono contenuto, e il contenuto dovrebbe essere HTML.

Astro vs Next.js vs Gatsby vs Hugo

La scelta del framework giusto dipende da cosa stai costruendo. Ecco un confronto onesto:

Caratteristica	Astro	Next.js	Gatsby	Hugo
JS inviato di default	0 KB	80-200+ KB	100-300+ KB	0 KB
Framework UI	Qualsiasi (React, Vue, Svelte, ecc.)	Solo React	Solo React	Solo template Go
SSG (statico)	Si	Si	Si	Si
SSR (server)	Si	Si	No (solo statico)	No (solo statico)
Velocita di build	Veloce	Media	Lenta per siti grandi	Molto veloce
Punteggio Lighthouse (sito contenuti)	95-100	60-90	50-85	95-100
Curva di apprendimento	Bassa	Media	Alta (layer dati GraphQL)	Media (template Go)
Content collections	Integrate (type-safe)	Manuali	Basate su plugin	Integrate
Ecosistema componenti	Usa qualsiasi framework	Ecosistema React	Ecosistema React	Limitato
Ideale per	Siti contenuti, blog, docs, marketing	Web app, dashboard, e-commerce dinamico	Siti contenuti (ma Astro lo fa meglio ora)	Blog semplici, docs

Quando Scegliere Astro Rispetto a Next.js

Scegli Astro quando il tuo sito e principalmente contenuto: blog, pagine marketing, documentazione, cataloghi prodotti, portfolio, siti di agenzie, landing page. Astro ti dara prestazioni migliori, costi di hosting inferiori (i file statici sono piu economici da servire) e migliore SEO out of the box.

Quando Scegliere Next.js Rispetto ad Astro

Scegli Next.js quando il tuo sito e principalmente un'applicazione: dashboard, prodotti SaaS, piattaforme social, strumenti di collaborazione in tempo reale. Se la maggior parte delle tue pagine richiede interattivita pesante con JavaScript, l'overhead dell'idratazione di tutto e giustificato perche ne hai effettivamente bisogno.

Perche Non Piu Gatsby

Gatsby e stato il generatore di siti statici leader per React dal 2017 al 2020. Ma i tempi di build per siti grandi sono diventati dolorosi, il suo ecosistema di plugin e diventato fragile, e l'azienda dietro (Gatsby Inc.) e stata acquisita da Netlify. Lo sviluppo si e rallentato significativamente. Per nuovi progetti, Astro o Next.js sono scelte migliori.

Lavorare con React, Vue e Svelte in Astro

Una delle caratteristiche piu potenti di Astro e che e agnostico rispetto al framework. Puoi usare componenti da React, Vue, Svelte, Solid, Preact, Alpine.js e Lit. Puoi persino mischiarli sulla stessa pagina.

Aggiungere React a un Progetto Astro

npx astro add react

Ora puoi importare e usare componenti React nelle tue pagine Astro. Senza una direttiva client:, il componente React si renderizza al momento del build e viene inviato come HTML statico. Con una direttiva client:, si idrata nel browser.

Mischiare Framework

Puoi avere un carosello React, un modulo di contatto Vue e un banner di notifica Svelte sulla stessa pagina. Ogni componente si idrata indipendentemente usando il proprio runtime di framework. Questa feature e utile anche per i team che migrano da un framework a un altro.

Generazione di Siti Statici e Rendering Server-Side

Astro supporta sia SSG (generazione di siti statici) che SSR (rendering server-side), e puoi mischiarli nello stesso progetto.

Modalita SSG (Predefinita)

In modalita SSG, Astro costruisce l'intero sito in HTML statico al momento del build. Ogni pagina diventa un file HTML. Questi file possono essere serviti da qualsiasi provider di hosting statico (Cloudflare Pages, Netlify, Vercel, GitHub Pages, Amazon S3). Questa e l'opzione di deploy piu veloce e economica.

Modalita SSR

In modalita SSR, le pagine vengono renderizzate sul server per ogni richiesta. Questo e utile per pagine che necessitano di dati dinamici. Astro supporta SSR su diversi runtime: Node.js, Deno, Cloudflare Workers, Netlify Functions, Vercel Edge Functions.

Modalita Ibrida

L'approccio piu pratico per la maggior parte dei siti web aziendali: usa SSG per la maggioranza delle pagine (che sono contenuto statico) e SSR per le poche pagine che necessitano di dati dinamici. Astro rende questo facile permettendoti di impostare la modalita di rendering per pagina.

Deploy su Cloudflare Pages, Vercel e Netlify

Cloudflare Pages

Cloudflare Pages e la nostra piattaforma di deploy raccomandata per i siti Astro, e la usiamo per la maggior parte dei siti che costruiamo a Envestis a Lugano. Motivazioni:

• Piano gratuito: 500 build al mese, banda illimitata, richieste illimitate. Questo copre la stragrande maggioranza dei siti web aziendali.
• CDN globale: Cloudflare ha data center in oltre 300 citta nel mondo, incluse Zurigo e Milano (vicine al Ticino). Il tuo sito si carica velocemente ovunque.
• Integrazione Workers: Se hai bisogno di SSR, Cloudflare Workers girano all'edge, vicino all'utente. I tempi di risposta sono tipicamente sotto i 50 ms.
• Analytics integrato: Gratuito, rispettoso della privacy, senza JavaScript aggiuntivo.

Vercel

Vercel e l'azienda dietro Next.js, ma supporta Astro bene. Il piano gratuito e generoso per progetti personali. Per uso aziendale, il prezzo parte da $20/mese per membro del team.

Netlify

Netlify ha pionerato il modello di hosting JAMstack. Il loro piano gratuito include 100 GB di banda al mese e 300 minuti di build. Buono per siti piu piccoli, ma i limiti di banda possono essere un problema per siti aziendali ad alto traffico.

Perfetto per Blog, Siti Marketing e Storefront E-Commerce

Blog e Siti di Contenuti

La feature content collections di Astro lo rende il miglior framework per siti ricchi di contenuti. Definisci lo schema del tuo contenuto in TypeScript, e Astro valida ogni entry di contenuto al momento del build. Markdown e MDX sono cittadini di prima classe. Feed RSS, sitemap e immagini Open Graph possono essere generati automaticamente.

Per i blog che necessitano di un CMS, Astro funziona con qualsiasi headless CMS: Strapi, Contentful, Sanity, Ghost, Directus. Recuperi il contenuto al momento del build (SSG) o al momento della richiesta (SSR) e lo renderizzi con componenti Astro. Per saperne di piu sulle opzioni CMS headless, leggi la nostra guida al confronto CMS headless.

Siti Marketing e di Agenzie

I siti marketing devono caricarsi velocemente, posizionarsi bene su Google e avere un aspetto curato. Astro offre tutti e tre. Il default senza JavaScript significa che i tuoi Core Web Vitals sono eccellenti senza lavoro di ottimizzazione.

Storefront E-Commerce

Per l'e-commerce, Astro gestisce il catalogo prodotti (pagine statiche per le liste prodotti, pagine di categoria, pagine di dettaglio prodotto) mentre gli elementi interattivi (aggiungi al carrello, carrello, checkout) sono isole che caricano JavaScript solo quando necessario.

Iniziare: Un Tutorial Pratico

Passo 1: Creare un Nuovo Progetto Astro

npm create astro@latest my-site

Il CLI ti guida attraverso le opzioni: usa un template starter, scegli TypeScript (raccomandato) e seleziona il controllo TypeScript rigoroso.

Passo 2: Struttura del Progetto

• src/pages/ - Ogni file diventa una route. index.astro e la home page, about.astro e /about.
• src/layouts/ - Layout di pagina riutilizzabili.
• src/components/ - Componenti UI riutilizzabili (Astro, React, Vue, ecc.).
• src/content/ - Content collections (post del blog, prodotti, ecc.).
• public/ - Asset statici (immagini, font, favicon).

Passo 3: Aggiungere Integrazioni

npx astro add tailwind # Aggiungi Tailwind CSS npx astro add react # Aggiungi supporto React npx astro add sitemap # Genera sitemap.xml npx astro add mdx # Aggiungi supporto MDX

Passo 4: Deploy

Per Cloudflare Pages, pusha il tuo codice su un repository Git e connettilo nel pannello Cloudflare. Imposta il comando di build su npm run build e la directory di output su dist. Ogni push al tuo branch principale scatena un nuovo deployment.

Perche Envestis Ha Scelto Astro

Costruiamo e manteniamo siti web per aziende in tutto il Ticino e in Svizzera. Quando abbiamo valutato i framework per il nostro sito e per i progetti dei clienti, la decisione e arrivata a cio che conta davvero per i siti web aziendali:

• Prestazioni: I nostri siti ottengono costantemente 95-100 su Lighthouse senza acrobazie di ottimizzazione delle prestazioni.
• Esperienza sviluppatore: I componenti Astro sono naturali da scrivere. Il supporto TypeScript e di prima classe.
• Flessibilita: Possiamo usare componenti React dove abbiamo bisogno di interattivita e HTML statico ovunque altro.
• Costi di hosting: I siti statici su Cloudflare Pages costano nulla per la maggior parte dei siti web aziendali.
• SEO: HTML renderizzato dal server con meta tag appropriati, dati strutturati e tempi di caricamento veloci.
• Manutenzione: I siti statici hanno una superficie di attacco piu piccola, meno dipendenze da aggiornare e deployment piu semplici. Per saperne di piu su perche i siti statici sono piu sicuri, leggi il nostro articolo sulla sicurezza dei siti web aziendali.

Quando Astro Non e la Scelta Giusta

• Applicazioni web altamente interattive: Se l'intera applicazione e una dashboard o un tool di collaborazione in tempo reale, Next.js o Nuxt sono piu adatti.
• Feature in tempo reale: WebSocket, collaborazione live e visualizzazione dati in tempo reale sono gestiti meglio da framework progettati per applicazioni dinamiche.
• Gestione stato complessa: Se la tua applicazione ha stato profondamente interconnesso, l'architettura a isole puo aggiungere complessita.

Per tutto il resto (e questo copre la stragrande maggioranza dei siti web aziendali), Astro offre risultati migliori con meno sforzo.

Prossimi Passi

Se stai pianificando un nuovo sito web o ricostruendo uno esistente, considera Astro. I miglioramenti delle prestazioni sono reali, l'esperienza sviluppatore e eccellente, e il framework e abbastanza maturo per l'uso in produzione.

In Envestis a Lugano, costruiamo siti web con Astro per aziende in tutta la Svizzera. Che tu abbia bisogno di un sito marketing, un blog, uno storefront e-commerce o una presenza web aziendale, possiamo aiutarti a costruire qualcosa che si carica velocemente, si posiziona bene e e semplice da mantenere. Contattaci per discutere il tuo progetto.