← Tutti gli articoli

Astro 3.0 e le View Transitions: SPA-feel senza il peso della SPA

08 August 20232 min di lettura

Le navigazioni fluide come in un'app, ma con un sito statico. Astro 3.0 fa un passo grosso e cambia il modo di pensare i siti contenuti-heavy.

Astro 3.0 è arrivato a fine agosto 2023 con un colpo che pochi si aspettavano: supporto nativo alle View Transitions API dei browser. In pratica, navigazioni con animazioni fluide tra pagine senza scrivere JavaScript di routing.

Perché ci interessa

Per il tipo di sito dove Astro brilla — editoriali, documentation, marketing — la sensazione di "ricarico la pagina" è il vero limite. Con le View Transitions, l'header resta, l'hero scivola via, la nuova pagina entra. Senza React Router, senza Vue Router, senza overhead.

Come funziona in pratica

Aggiungi <ViewTransitions /> nel layout, dichiari transition:name sugli elementi che devono "morphare", e Astro fa il resto. Il browser intercetta il click sui link interni, fetcha la nuova pagina, applica le transizioni CSS dichiarate.

I limiti onesti

  • Su Safari il supporto è arrivato dopo, e il fallback è un page reload classico — non è male, ma sentito.
  • Non è una SPA: lo stato React/Vue dei componenti island viene perso al cambio pagina, salvo dichiarazioni esplicite.
  • Se l'app ha bisogno di state che persiste (player audio, sessioni live), Astro non è la scelta.

Per chi lo consigliamo

Siti istituzionali con 20-200 pagine, blog, knowledge base, documentation. Non per app complesse. La differenza percepita rispetto a un Next.js statico è marginale, ma il bundle JS è 1/10 — e per progetti SEO-driven significa meno fatica sul Core Web Vitals.