Astro viene spesso descritto come un generatore di siti statici, ma questa è solo metà della storia.
Una delle sue funzionalità più potenti è la Islands Architecture, che permette di costruire pagine per lo più statiche in HTML aggiungendo componenti interattivi ricchi solo dove servono davvero.
Per blog di viaggio, guide escursionistiche e siti turistici questo è un approccio ideale.
Cos’è un’Island?#
Immagina una pagina così:
------------------------------------------------
Immagine hero
Articolo
Gallery
Informazioni sul percorso
Mappa interattiva
Widget di prenotazione
Articoli correlati
------------------------------------------------La maggior parte della pagina viene renderizzata come HTML statico durante il build.
Solo la mappa e il widget di prenotazione diventano interattivi nel browser.
Questo significa:
- caricamento più veloce
- SEO migliore
- meno JavaScript
- costi di hosting più bassi
Mescolare Markdown e componenti#
Un tipico articolo di un tour potrebbe assomigliare a questo.
---import RouteMap from "@/components/RouteMap";import BookingWidget from "@/components/BookingWidget";---
<Content />
<RouteMap gpx="/tracks/lake-tour.gpx" client:visible/>
<BookingWidget eventId="lake-tour-july" client:load/>L’articolo vero e proprio proviene dal Markdown, mentre le sezioni interattive sono componenti React.
Mappe dei percorsi#
Le mappe interattive sono uno degli esempi migliori di Island.
Un componente RouteMap personalizzato può mostrare:
| Funzionalità | Descrizione |
|---|---|
| Traccia GPX | Disegna percorsi escursionistici o a piedi |
| Distanza | Lunghezza totale del percorso |
| Altimetria | Dislivello totale in salita e discesa |
| Waypoint | Tappe e punti di interesse |
| Zoom | Navigazione interattiva |
Il resto dell’articolo rimane statico.
Profili altimetrici#
Un file GPX contiene informazioni sufficienti per generare un grafico altimetrico.
Altitudine
900m ────────────────╮ │700m ───────╮ │ │ │500m ───────╰────────╯────────
Distanza → 12,8 kmQuesta visualizzazione viene calcolata interamente nel browser.
Widget di prenotazione#
La prenotazione interattiva non dovrebbe mai rallentare la pagina.
Invece di renderizzare tutto dinamicamente, Astro idrata solo il componente di prenotazione.
Tutto il resto della pagina rimane statico.
Idratazione lazy#
Astro permette a ogni Island di decidere quando deve caricarsi.
| Direttiva | Comportamento |
|---|---|
client:load | Caricamento immediato |
client:idle | Attende che il browser sia inattivo |
client:visible | Si carica quando diventa visibile a schermo |
client:only | Renderizzato interamente lato client |
Per le mappe posizionate verso il fondo di articoli lunghi, client:visible è di solito la scelta migliore.
<RouteMap gpx="/tracks/mountain.gpx" client:visible/>Guide turistiche con Astro#
Una pagina completa di guida turistica potrebbe combinare senza soluzione di continuità contenuti statici e interattivi.
Hero
↓
Panoramica
↓
Gallery
↓
Dettagli del percorso
↓
Mappa interattiva
↓
Profilo altimetrico
↓
Meteo
↓
Prenotazione
↓
FAQ
↓
Articoli correlati
La maggior parte di queste sezioni viene generata durante il processo di build.
Solo i componenti che richiedono davvero JavaScript diventano Island.
Gallery#
Considerazioni finali#
La Islands Architecture di Astro incoraggia una filosofia semplice:
Mantieni i contenuti statici. Aggiungi JavaScript solo dove gli utenti hanno davvero bisogno di interazione.
Per i siti di viaggio questo si traduce in pagine che sono:
- estremamente veloci
- SEO friendly
- facili da mantenere
- altamente interattive dove conta davvero
Invece di costruire un’intera Single Page Application, costruisci solo i pezzi interattivi che migliorano l’esperienza utente.