Cos’è Astro
Astro è un web framework che ha come obiettivo creare siti veloci e semplici da costruire. Consente allo sviluppatore di creare un sito utilizzando le proprie librerie UI preferite (come React, Vue, Svelte, ecc…) per creare un sito statico, avendo la piena capacità di decidere quanto e quale codice javascript inviare al client.
Per molto tempo sono stato restio dall’immergermi in questi framework più recenti, dato che nel mondo di Javascript vengono pubblicati così tanti nuovi strumenti che potremmo sentirci come se venissimo travolti da un fiume in piena (vedi il sito “giorni trascorsi dall’ultimo framework javascript”).
Comunque, dopo aver buttato un’occhiata a questo nuovo framework, ho capito che era esattamente ciò che volevo per il mio sito.
Perché migrare da Gatsby ad Astro
Attualmente andreadev.it sta utilizzando Gatsby per la generazione statica del sito. Il problema è che Gatsby non fa solo la generazione del codice html, ma di default scarica anche React (o Preact) sul dispositivo dell’utente, facendo poi una hydration del contenuto. In pratica, il termine hydration significa che dopo aver scaricato React, javascript avvia l’applicazione e controlla le similitudini e le differenze fra il codice che sarebbe stato generato tramite il framework e il codice già presente sulla pagina. Dopodiché associa ogni componente React con gli elementi html corrispondenti e lascia al framework la responsabilità di aggiornarli.
Questo concetto può sembrare molto attraente, in quanto ci permette di avere sia un sito con l’HTML già pronto e multi-pagina (che è un’ottima cosa per il SEO e per chi naviga senza utilizzare javascript) che anche l’interattività tipica delle applicazioni React.
Però ci sono anche alcuni problemi.
Performance lato client
Di per sé Gatsby non soffre di performance orribili. In genere sono meglio di quello che si riesce ad ottenere con altri strumenti. Però, quando penso ad un “generatore di siti statici”, non concepisco che un’intero framework venga scaricato appena si carica la pagina! Con il download e l’esecuzione del codice javascript, le performance vengono degradate. Per questo motivo nel mio blog ho installato un plugin di Gatsby che elimina ogni traccia di javascript dal sito. Dopodiché, per aggiungere l’interattività dove serviva, ho creato degli script scritti a mano così da aggirare React.
Per fare tutto questo con Gatsby, ho dovuto adattare alla bene e meglio il sistema per raggiungere il mio obiettivo. Invece, Astro è già predisposto esattamente come avrei voluto fin dall’inizio.
Di default, Astro è un generatore di siti statici nel senso pieno del termine: neanche un byte di javascript viene inviato tramite la rete al client. Poi, si possono utilizzare degli script tag (inseriti direttamente nei componenti del sito) per aggiungere della piccola interattività. Questi script vengono automaticamente ottimizzati così da alleggerire ulteriormente la quantità di codice scaricato. Se si desidera, si può anche creare qualche componente che usa una libreria come React, però quella libreria verrà scaricata solo quando il componente viene caricato nella pagina, e solo se lo sviluppatore lo richiede.
Performance durante la creazione del sito
La versione di Gatsby che ho attualmente installato per il sito è abbastanza
obsoleta e probabilmente è questa la causa del problema, ma l’avvio del
sistema di Gatsby mentre sto sviluppando il mio sito (con il comando gatsby develop)
è decisamente lento e frustrante.
Astro invece utilizza Vite come strumento per effettuare le build e per mostrare il risultato mentre si sta sviluppando. Questo sistema è estremamente veloce, decisamente più veloce di Gatsby.
Problemi con l’installazione
Avendo installato diversi plugin di Gatsby, mi sono ritrovato ad avere problemi. Alcuni plugin che mi servivano non erano più aggiornati, e le versioni di Gatsby che richiedevano erano più vecchie di quella che stavo usando. Questo ha causato molti errori legati alle peer dependencies, errori che nemmeno gli sviluppatori esperti di Javascript sono in grado di risolvere (se sapete l’inglese, il video merita davvero di essere visto!).
A questo riguardo, non posso dire con certezza che Astro sia migliore, ma perlomeno tutti i plugin che ho utilizzato finora (che vengono chiamati “integrazioni”) sono aggiornati e non vanno in conflitto con il sistema.
Da Gatsby ad Astro
Questo articolo è il primo di una serie, nella quale documenterò il processo di migrare il mio sito da Gatsby ad Astro. Sicuramente troverete alcune informazioni interessanti che potranno essere utili anche a voi nel caso decidiate di creare un sito statico utilizzando questo nuovo sistema.
Con questo concludiamo l’introduzione alla serie, la prima parte inzierà ad andare in profondità nel codice e negli aspetti tecnici. A presto!