Cos’è Astro, il suo approccio tecnico e come funziona

Fino a poco tempo fa, quando realizzavo un sito aziendale, la scelta abituale per me — come per quasi tutti — era WordPress. Per motivi ovvi: è semplice, quasi tutto ciò che ti serve è già sviluppato e, dopo tanti anni, il mio flusso di lavoro è molto rapido.

Ma nell’ultimo progetto che ho sviluppato, il sito di Rondabus, ho usato Astro. 

Il motivo?

Lo consigliavano in una newsletter sull’IA che seguo, perché a quanto dicevano si integra molto bene con gli agenti.

E infatti lo fa eccome.

Ho considerato il progetto soprattutto come un test dello stato attuale dello sviluppo web. Per verificare quanto dipenda ancora da un essere umano e quanto si possa già fare con l’IA. Ed è per questo che ho usato il framework consigliato.

Ovviamente mi sono documentato per capire se fosse adatto a quello che volevo fare. E da quella documentazione nasce questo articolo, in cui ti racconto ciò che devi sapere per deciderti a provarlo. E qualcosa in più.

Ma prima di entrare nel merito, un paio di cosette:

La prima è che sono rimasto folgorato dal suo approccio HTML first. È esattamente quello che predico da anni.

La seconda è che, ad oggi, per sviluppare un sito web, a parte il criterio, tutto il resto lo mette ChatGPT o Claude..

Ora sì, cominciamo.

Che cos’è esattamente Astro

Astro è un framework per costruire siti web, cioè un insieme di strumenti e linee guida che ti aiuta a generare il codice del tuo sito.

Né più, né meno.

Ce ne sono molti, ognuno con le sue particolarità. Qui ti racconto quelle di Astro.

Astro permette di lavorare con elementi riutilizzabili, dati condivisi e template. Poi combina tutto per produrre il sito.

In altre parole, pensa a ciò che ti serve per creare il sito di un’azienda: header, menu, pagine dei servizi, fotografie, testi, modulo e footer. Potresti scrivere ogni pagina a mano in HTML, ma ripeteresti molto lavoro.

Se cambi il telefono, aggiungi una voce al menu o un link nel footer, dovresti correggerlo in tutti i file del sito. Con Astro no, perché riutilizza gli elementi.

E mi dirai: come in WordPress. Sì, è vero, ma qui dietro non c’è un database.

Potresti anche rispondermi che è come con qualsiasi linguaggio lato server, come PHP, e io ti direi che non serve avere alcun linguaggio installato sul server: basta che ci siano i file.

Come si faceva in origine: un file HTML per URL con i relativi CSS e JS.

Infatti puoi usare HTML, CSS e JavaScript o TypeScript, ma puoi anche integrare componenti React, Vue o Svelte se ti servono, cosa che io non faccio.

E come si ottengono elementi riutilizzabili e tanti HTML?

La differenza fondamentale: generare il sito prima che arrivi l’utente

Per capire Astro conviene separare i due momenti di un sito web:

1. Quando viene sviluppato.
2. Quando qualcuno lo visita.

In un sito dinamico tradizionale, il server prepara la pagina quando riceve una richiesta. Esegue codice, recupera i dati necessari, li inserisce in un template e restituisce il risultato al browser.

WordPress, per esempio, funziona così: PHP esegue l’applicazione, interroga il database e usa tema e plugin per generare la pagina. Sì, la cache permette di salvare una risposta e riutilizzarla, quindi non è necessario ripetere tutto il processo a ogni visita. L’importante è capire che esiste un’applicazione in grado di creare la risposta mentre il sito è in funzione.

Con Astro, invece, puoi fare quel lavoro prima di pubblicare. Prepari le pagine, generi i file e metti il risultato sull’hosting. È ciò che si chiama una build..

Così, quando qualcuno apre la pagina dei contatti, il server consegna un HTML che era già pronto. Non deve ricostruire l’header, recuperare il telefono e montare il footer per quel visitatore.

Questo modo di lavorare si chiama SSG, o generazione di siti statici. E ha diversi vantaggi, come il fatto che i siti creati così, letteralmente, volano..

Ce ne sono altri che ti spiego nell’articolo.

Quello che ti ho raccontato finora basta per farti un’idea di ciò di cui stiamo parlando, se non sei tecnico. Se lo sei, da qui in avanti approfondiamo come lavora il framework.

Caffè forte per veri amanti del caffè. Sei avvisato.

Parliamo delle build

Per prima cosa devi capire che una build non è altro che il risultato di un processo automatizzato che prende tutti i file che hai scritto (codice, immagini, stili) e li trasforma in un pacchetto pronto per essere eseguito dal server o dal browser web..

E basta.

In altre parole, hai una serie di file con del codice che fanno cose diverse. Quando esegui il comando per compilare la build, Astro identifica le pagine, recupera i contenuti, esegue i template e prepara le risorse, per infine restituirti un sito statico completo, con HTML, CSS e JS (se necessari)..

Per esempio, puoi avere un template comune e otto schede di servizi. La build combina il template con i dati di ogni scheda e produce le pagine corrispondenti.

In Astro si fa con il comando npm run build , che normalmente esegue astro build. . Il sito pronto da caricare si trova nella cartella dist , pronto per essere caricato sul server a cui punta il dominio.

Come si costruisce una pagina in Astro

Se non ci sei abituato, il vocabolario sembra più complicato di quanto sia. Vediamolo con un piccolo sito aziendale.

Com’è fatto un file .astro

Un file .astro può combinare una parte di codice con un template simile all’HTML:

—

const titulo = 'Transporte para tu empresa';

—

<h1>{titulo}</h1>

<p>Organizamos los desplazamientos de tu equipo.</p>

Quello che compare tra i due gruppi di trattini prepara i dati. Sotto c’è il template che li usa. Le parentesi graffe indicano dove inserire un valore.

Quel codice viene eseguito durante la costruzione del sito e il browser riceve un normale titolo con il suo testo e un normale paragrafo, con il contenuto della variabile titulo.

Componenti

Gli elementi che vengono riutilizzati.. 

Per esempio, l’header può essere un componente. Il footer, un altro. Un template per il modulo hero banner delle pagine dei servizi, un altro ancora. Li salvi separatamente e li usi nelle pagine che ne hanno bisogno.

Per esempio, una pagina può importare Header.astro e Footer.astro e inserire <Header /> all’inizio e <Footer /> alla fine. Astro trasforma questi elementi nel markup HTML corrispondente.

Props

Le props sono i dati che passi a un componente per poterlo riutilizzare con contenuti diversi..

Se hai creato un componente per il modulo hero banner delle pagine dei servizi, puoi passargli un titolo, una descrizione e un’immagine. La struttura mantiene il suo design mentre cambiano i valori. Così, il modulo hero del servizio 1 può essere uno e quello del servizio 2 un altro, con contenuti diversi ma lo stesso design.

In Astro, il componente può leggere questi valori tramite Astro.props. 

Layout e slot

Un layout è una struttura condivisa da più pagine. Diciamo che è come un componente portato a un livello superiore: : un componente di solito è una piccola parte della pagina, mentre il layout comprende praticamente tutto..

Può includere il documento HTML, i metadati, l’header e il footer.

Lo slot è lo spazio in cui viene inserito il contenuto specifico di ogni pagina. 

Se vieni da WordPress, ti ricorderà i template che condividono header e footer mentre il contenuto principale cambia tra le varie URL. Non funziona esattamente allo stesso modo, ma svolge una funzione simile: evitare di ricostruire ogni volta le parti comuni.

Come Astro organizza gli URL

Astro usa un sistema di routing basato sui file. In un progetto semplice, la posizione di una pagina all’interno di src/pages determina il suo indirizzo:

File	Route
src/pages/index.astro	/
src/pages/contacto.astro	/contacto
src/pages/servicios/bodas.astro	/servicios/bodas

La barra finale dipende dalla configurazione e dall’hosting, ma la relazione di base è questa.

Non devi creare manualmente un file diverso per ogni articolo o servizio. Questo permette di generare molte pagine a partire da un template e da un insieme di dati, senza copiare lo stesso codice ancora e ancora.

Dove viene salvato il contenuto se Astro non ha un database

Il fatto che Astro non richieda un database significa che testi e dati devono essere salvati in qualche tipo di fonte; puoi scegliere quale.

File, Markdown, JSON e YAML

Per un sito piccolo, parte del testo può stare direttamente nelle pagine. I dati condivisi, come il numero di telefono, conviene separarli per non doverli correggere in venti posti.

Un articolo può essere salvato in Markdown, un formato di testo con marcature semplici per titoli, liste e link. JSON e YAML servono a organizzare i dati: schede di servizi, informazioni sui veicoli o testi per lingua, per esempio.

Sono formati diversi per esigenze diverse. Non devi usarli tutti né trasformare ogni frase del tuo sito in una struttura complicata.

Content Collections

Le Content Collections, o collezioni di contenuti, aiutano a organizzare insiemi di voci di dati e a definirne la struttura..

Immagina una collezione di servizi in cui ogni scheda deve avere un titolo, una descrizione e un’immagine. Puoi definire queste regole e validare i dati, così è più facile individuare una scheda incompleta o un valore del tipo sbagliato.

Se conosci i tipi di contenuto e i campi personalizzati di WordPress, l’idea di organizzare schede ti risulterà familiare.

Contenuti avanzati: API, CMS e database esterni

Anche se stiamo generando siti statici, il contenuto può anche arrivare da un CMS, un’API o un database. Un’API è un modo per far scambiare informazioni a due sistemi: Astro richiede alcuni dati e l’altro sistema glieli fornisce.

Puoi perfino usare WordPress come fonte degli articoli e costruire la parte pubblica con Astro. Torneremo su questa combinazione in Astro vs WordPress..

La domanda decisiva è quando recuperi quelle informazioni. Se vengono incorporate durante la build, modificarle nella fonte non cambia l’HTML pubblicato finché non lo rigeneri. Se vengono richieste durante una richiesta o dal browser, il comportamento è diverso e più simile a quello delle pagine dinamiche tradizionali.

Che cosa sono le Islands di Astro

Una pagina può avere molti contenuti che devi solo leggere e una piccola parte con cui vuoi interagire. Per esempio, un calcolatore di preventivo dentro una pagina di servizio. Oppure un modulo..

L’architettura a isole permette che quel componente abbia un comportamento proprio senza trasformare l’intera pagina in un’applicazione eseguita nel browser.

Che cosa significa idratare un componente

Idratare significa aggiungere il codice di un componente interattivo a un HTML già generato, in modo che possa rispondere alle azioni dell’utente.

Il calcolatore o il modulo possono essere mostrati al caricamento della pagina e poi attivare la propria logica.. 

Qui stiamo parlando di isole client. Astro dispone anche di isole server per risolvere separatamente le parti dinamiche, anche se non serve approfondirle per capire questa prima spiegazione.

Quando il browser ha bisogno di JavaScript

Non tutte le interazioni richiedono un’isola. Un link funziona con HTML. Un semplice menu a tendina può essere realizzato con HTML e CSS.

Al contrario, un calcolatore che aggiorna i risultati mentre cambi le opzioni di solito ha bisogno di JavaScript. E il modulo richiede un’integrazione o un linguaggio lato server per inviare i dati.

Ed è qui che adoro l’approccio di Astro: la decisione dipende dalla funzione che vuoi offrire, non dall’idea trita secondo cui un sito moderno debba caricare un’applicazione intera..

Astro cerca di inviare zero JavaScript per impostazione predefinita

Attenzione a non confonderci: parliamo del sito che vede l’utente.. 

Perché Astro usa JavaScript per lavorare e compilare, ma i componenti .astro non devono inviare al browser il proprio codice di preparazione. 

Gli script che aggiungi, le isole che idrati e gli strumenti esterni possono comunque incorporare JavaScript. Una chat, una piattaforma di analytics (GA4) o un video incorporato ne hanno bisogno.

Quindi, “zero JavaScript per impostazione predefinita” è il punto di partenza, non un obbligo.

E, come ti spiego più sotto, per me si adatta benissimo, per esempio, allo sviluppo di siti aziendali.

Astro può essere statico, dinamico o ibrido

Bene, finora mi sono concentrato su un solo approccio, ma ce ne sono due possibili.

SSG

Quello che abbiamo visto finora: la pagina viene generata prima delle visite, durante la build. 

È perfetto quando il contenuto può rimanere uguale per tutti fino alla pubblicazione successiva. Cioè, per pagine che cambiano poco.

SSR

La pagina viene generata sul server su richiesta. Può utilizzare informazioni che non erano disponibili durante la build, come dati associati a una sessione. 

Non va più bene un server qualsiasi: serve un ambiente di esecuzione compatibile e il relativo adapter.

Rendering ibrido

Puoi combinare pagine prerenderizzate e pagine generate su richiesta. Per esempio, mantenere pronte le pagine pubbliche e gestire un’area privata sul server.

Che ruolo hanno Node.js e Vite

Node.js permette di eseguire JavaScript fuori dal browser. In un tipico progetto Astro partecipa allo sviluppo e alla costruzione della build, dove npm aiuta a gestire pacchetti e comandi. Per un sito statico, Node.js non deve essere in esecuzione sul server di produzione che ospita la build.

Vite è un motore usato da molti framework moderni. Fa parte della macchina che Astro utilizza per lavorare con i file e fornire l’ambiente di sviluppo. 

Quanto basta per farti un’idea.

Come è organizzato un progetto Astro

Quando apri un progetto, vedrai cartelle che non sono pagine e file che non vengono pubblicati. Questa piccola mappa ti aiuterà a distinguerli.

src

Contiene il codice sorgente: pagine, componenti, layout e altri file di lavoro. È qui che viene costruita buona parte del sito.

public

Contiene risorse che vengono servite senza la normale elaborazione applicata ai file importati: per esempio un robots.txt o determinate immagini. Tutto ciò che metti qui sarà pubblico, quindi non è il posto per le credenziali.

package.json

Descrive il progetto, le sue dipendenze e i suoi script. È qui che si definisce cosa eseguono comandi come npm run build. Il file di lock delle dipendenze aiuta a conservare versioni specifiche per poter ripetere l’installazione.

node_modules

È la cartella in cui vengono installati i pacchetti necessari al progetto. Normalmente si ricostruisce a partire dai file delle dipendenze e non viene salvata per intero in Git.

dist

Contiene l’output di produzione dopo la build. Per un sito statico, qui trovi i file pronti per essere pubblicati.

Che cosa caricano davvero il browser e Google

Lo ripeto ancora una volta per quelli dell’ultima fila: il browser non riceve il tuo progetto come lo vedi nell’editor. Riceve l’HTML e le risorse necessarie per mostrare e utilizzare la pagina.

Un motore di ricerca che richiede quell’URL riceverà l’HTML, sia che tu lo abbia preparato durante la build sia che lo abbia generato sul server. Questo non garantisce che lo indicizzi né che lo posizioni bene: continuano a contare contenuti, link e impostazioni di crawling e indicizzazione, ma, per mia esperienza, ciò che riceve può essere ottimizzato molto, molto bene.

L’idea che voglio ti rimanga è questa: tutti quei template, collezioni e componenti servono a produrre un sito che continua a usare le tecnologie di sempre. Astro dirige la creazione del sito; l’HTML risultante viene ricevuto da un browser.

Conclusione: per quali tipi di siti ha senso Astro

Questo modo di lavorare si adatta bene ai siti in cui il contenuto non cambia troppo:

• Siti aziendali.
• Portfolio
• Landing page.

Non lo consiglierei per riviste, blog e siti in cui si crea molto contenuto o lavorano diversi content creator. Per quello continuo a preferire WordPress ad Astro..

Se ti è piaciuto l’approccio e vuoi saperne di più, puoi continuare leggendo i vantaggi e gli svantaggi di Astro..

E se preferisci calarlo in un progetto completo, ho preparato il processo per creare un sito per un’attività locale con l’IA, usando il mio ultimo progetto come esempio.

Ti garantisco che, una volta provato, non vorrai più tornare indietro.