Astro permette di creare siti web statici caricando 0 codice Javascript nel browser. L’utente caricherà il sito web velocemente e lo amerà all’istante mentre lo sviluppatore amerà creare siti web con questo tool perché potrà utilizzare anche i framework più pesanti.

Cloudflare DNS API passaggio 1

ASTRO: A COSA SERVE?

Astro JS è un tool da poco rilasciato in versione stabile che viene utilizzato per la creazione di siti web statici e dinamici. Permette di integrare il proprio framework preferito o anche più di uno nello stesso progetto.

Astro in fase di build crea pagine con HTML statico come farebbe un classico SSG (Static Site Generator), ma l’unicità che apporta Astro sta nella creazione di componenti che possono diventare interattivi con l’ausilio di Javascript e attraverso varie strategie caricarle nel browser solo nel momento in cui necessitano di essere utilizzate.

LE NUOVE DIRETTIVE

La direttiva nei templates è un tag HTML speciale disponibile in ogni componente di Astro (.astro files) e anche nei files markdown (.mdx files).

Le templates directives sono usate per controllare il comportamento di un elemento o un componente in diversi modi:

  • client:load: Sarà caricato al caricamento della pagina, come per un normale script in Javascript;

  • client:idle: Il componente sarà caricato solamente quando il browser avrà raggiunto lo stato di idle: lo si usa quando il componente non ha una priorità alta;

  • client:visible: Il componente verrà caricato solamente se viene visualizzato nel browser.

Per approfondire l’argomento sulle client-directives rimando alla documentazione ufficiale.

Con questo nuovo concetto dobbiamo iniziare ad abbondare l’idea di costruire siti come si è effettuato fino a ieri costruendo SPA dove Javascript si occupava di tutto, ma quello che Astro ha implementato sono le Island, dei componenti in mezzo al mare. Basti pensare che l’acqua è l’HTML statico e le isole sono dei componenti isolati gli uni dagli altri, interattivi nel bisogno, che portano alla creazione di siti veloci con tutta la potenza di un framework come ad esempio React, Vue o Svelte.

BENEFICI

L’ovvio beneficio di questa implementazione è la performance: l’intero sito viene convertito in codice HTML veloce, leggero e statico mentre il codice Javascript è caricato solamente nei componenti individuali che ne richiedono. Ricordo che javascript è uno degli asset più lenti a caricarsi in proporzione ai byte, quindi ciò che ne consegue è che ogni byte conta.

Un altro beneficio è il caricamento parallelo. Più componenti contemporaneamente vengono caricati dal browser.

Non bisogna dimenticarsi che si può stabilire quando un componente può essere caricato: se dobbiamo visualizzare una parte del sito pesante possiamo impostare il suo caricamento solo nel momento in cui è visibile, cosa che potrebbe non avvenire se l’utente non arriva a visualizzarla.

MOLTI FRAMEWORKS O NESSUNO

Costruire il sito con Astro senza caricare nessuna linea di codice in Javascript non significa che non si può usare un framework in fase di sviluppo. Astro supporta nativamente i suoi componenti - .Astro files - ma si possono anche scrivere i componenti usando React, Svelte, Vue e molti di più. Ufficialmente è supportato l’utilizzo anche di piò frameworks nello stesso progetto e componente.
Per esempio il seguente componente funziona senza problemi:

---
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

Di default, il componente verrà creato come HTML statico senza l’interattività di Javascript client-side. Basterà aggiungere le templates directives.

MARKDOWN

Quasi tutti, se non tutti, gli SSG hanno al proprio interno qualche meccanismo per creare il contenuto HTML dal codice markdown. Astro permette di fare di più: gestire dinamicamente il codice markdown cosa che altri SSG non lo permettono.

Per esempio, nel metadata all’inizio del file markdown è possibile inserire variabili e richiamarle nel contenuto.

---
testo: world
---
Hello {frontmatter.testo}!

È altresì possibile importare componenti in un Astro file e usarlo successivamente nel contenuto del Markdown. Non solo componenti nativi Astro, ma anche di altri framework:

---
setup: |
  import Autore from '../../components/Author.astro'
autore: Mario
---

<Autore name={frontmatter.autore}/>

Per finire, è possibile importare singoli file Markdown o addirittura un’intera cartella con svariati files e usarli come dati come nell’esempio riportato nella documentazione di Astro:

---
import * as greatPost from '../pages/post/great-post.md';
const posts = await astro.glob('../pages/post/*.md');
---

Great post: <a href={greatPost.url}>{greatPost.frontmatter.title}</a>

<ul>
  {posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>

STATIC ASSETS

Astro rende facile includere tutti i files statici di cui abbiamo bisogno e importarli con import in qualsiasi componente o pagina.
Si possono importare altri files oltre ai componenti Astro (.astro) o componenti React (.jsx) come scritto in precedenza.

Nei vari files di Astro siamo in grado di allegare Javascript, TypeScript, JSON, npm packages e immagini senza bisogno di nessuna configurazione. Questa implementazione permette di integrare praticamente ogni tipo di file statico e beneficiare della ottimizzazione di Astro in fase di build.

SSR (SERVER SIDE RENDERING)

In alcune tipologie di siti c’è la necessità di implementare le sessions per gestire i login degli utenti, gestire le API call dinamicamente attraverso fetch. Per questi bisogni SSR è la tecnologia da utilizzare.

ATTIVAZIONE

Per attivare SSR è sufficiente inserire nel file di configurazione astro.config.mjs:

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server'
});

ADAPTER

Quando il progetto è terminato e si deve vuole renderlo disponibile online, bisogna scegliere un adapter. Questo perché SSR ha come requisito un server runtime: l’ambiente dove viene creato il codice server-side.

Esistono diversi adapter che permettono ad Astro di creare uno script di output diverso in base al runtime specifico scelto.

I seguenti adapters sono disponibili nel momento in cui sto scrivendo:

  • Cloudflare;
  • Deno;
  • Netlify;
  • Node.js;
  • Vercel.

Per conoscere tutte le varie funzioni che si vengono ad aggiungere abilitando SSR rimando alla documentazione ufficiale.

CONSIDERAZIONI FINALI

Ho già costruito 3 siti con Astro, due dei quali erano scritti in precedenza con nuxtjs e di conseguenza alla base c’era vuejs: sono blog con parti interattive e devo ammetterlo, la differenza a livello di usabilità e velocità è visibile sia nei classici test che nell’usabilità dal browser. L’utilizzo di Astro Islands la si nota nel caricamento delle pagine sopratutto in quelle dove JS viene eseguito con il tag client:visible, cioè solo nel caso in cui l’utente visualizza il componente che viene caricato al bisogno. Questo aumento della velocità ha avuto anche un beneficio a livello SEO: sono aumentate le pagine medie visitate dagli utenti e, sopratutto, il posizionamento medio nella ricerca di Google è migliorato.

Dopo aver provato a riscrivere il primo sito sono rimasto subito affascinato dal risultato e ho deciso di ricostruire con Astro altri progetti già online da tempo. Al momento non posso fare altro che consigliarlo, sia per lo sviluppo con la possibilità di utilizzare tutti i framework che conosciamo meglio, sia per il risultato finale che, risultati alla mano, sono migliori.
C’è da sottolineare il fatto che se c’è il bisogno di costruire una webapp Astro non è il miglior tool da utilizzare, ma bisogna anche ricordarsi che è solo all’inizio del suo sviluppo con molti developers che partecipano essendo il progetto open-source ed avendo sponsorizzazioni da società leader del settore. Stay tuned!