Guide

Una single-page application, o SPA, è un sito web che carica un singolo documento HTML una volta e poi aggiorna il contenuto nel browser mentre interagisci, invece di recuperare una pagina nuova di zecca dal server a ogni clic. La «pagina singola» è letterale: il browser non esegue mai un ricaricamento completo durante l'uso normale. Tutto dopo quel primo caricamento è gestito da JavaScript che riscrive la pagina corrente.

Dai siti multipagina alla pagina singola

Per apprezzare perché esistono le SPA, aiuta ricordare il modello tradizionale contro cui hanno reagito. In un classico sito multipagina, ogni link o invio di form chiede al server un nuovo documento HTML completo, che il browser poi carica da zero - intestazione, piè di pagina e tutto. È semplice e robusto, ma ogni navigazione comporta un ricaricamento visibile e un viaggio di andata e ritorno al server, il che può sembrare lento e sconnesso.

Una SPA capovolge tutto questo. Il server invia una shell HTML e un bundle di JavaScript alla prima visita; da quel momento, navigare verso una nuova «pagina» esegue codice nel browser che sostituisce la parte rilevante dell'interfaccia e recupera solo i dati di cui ha bisogno, di solito come JSON da un'API. Poiché non c'è un ricaricamento completo, le transizioni possono essere istantanee e l'esperienza si avvicina a quella di un'app desktop o mobile.

I framework e l'attrattiva delle SPA

Questo è precisamente il territorio dei framework front-end. React, Vue, Svelte e Angular esistono in gran parte per rendere gestibile la costruzione di SPA, fornendo i componenti, la gestione dello stato e il routing lato client che scambiano le viste senza ricaricare. Quando senti che un sito è «costruito con React» o «costruito con Vue», molto spesso è una SPA - il framework è ciò che rende pratico costruire e mantenere il modello a pagina singola.

• SPA: carica una shell HTML, poi aggiorna il contenuto nel browser via JS
• Costruita con framework come React, Vue, Svelte o Angular
• Pro: navigazione veloce e simile a un'app dopo il primo caricamento
• Contro: primo caricamento più pesante; serve cura per SEO, accessibilità, routing
• L'SSR (Next.js, Nuxt) dà un primo paint veloce più navigazione SPA

L'attrattiva è un'esperienza genuinamente più fluida. Una volta caricato il bundle iniziale, le interazioni sono veloci perché l'app richiede solo dati anziché interi documenti, e l'interfaccia può aggiornarsi fluidamente senza lo sfarfallio di un ricaricamento. Per prodotti altamente interattivi - dashboard, editor, web app che si comportano come software - questa reattività è un vantaggio reale e duraturo rispetto al modello multipagina.

Come funziona davvero una SPA Vue

Aiuta vedere come funziona in un framework concreto anziché in astratto, e Vue è un caso chiaro, perché il pezzo che rende una SPA tale ha un proprio progetto ufficiale. Vue Router si presenta come la soluzione ufficiale di routing lato client per Vue, e la sua documentazione ne enuncia lo scopo senza giri di parole: il routing lato client è usato dalle applicazioni a pagina singola per legare l’URL del browser al contenuto visto dall’utente; mentre l’utente naviga nell’applicazione, l’URL si aggiorna di conseguenza, ma la pagina non ha bisogno di essere ricaricata dal server.

Il meccanismo si riduce a due componenti che collochi nel tuo markup. Configuri delle rotte per dire a Vue Router quali componenti mostrare per ciascun percorso di URL. Il componente RouterView indica poi a Vue Router dove rendere il componente di rotta corrente, quello che corrisponde al percorso di URL attuale. Le parti della pagina che restano ferme sono markup ordinario, e RouterView segna il punto in cui si inserisce il pezzo specifico della pagina.

La navigazione è l’altra metà, ed è lì che l’illusione si regge. Al posto dei normali tag di collegamento si usa il componente RouterLink per creare i link, il che permette a Vue Router di cambiare l’URL senza ricaricare la pagina e di gestire la generazione degli URL, la codifica e varie altre funzionalità. Questa sola sostituzione impedisce a un clic di innescare una richiesta di documento completa, e spiega un errore frequente tra i principianti: un normale tag di collegamento dentro una SPA funziona comunque, ma ricarica tutto e butta via lo stato applicativo su cui contavi.

Vue Router chiede anche di scegliere una modalità di cronologia, tramite createWebHistory, createWebHashHistory o createMemoryHistory, che controlla come le rotte vengono mappate sugli URL e viceversa. Sembra un dettaglio e non lo è. Decide se i tuoi URL somigliano a percorsi ordinari e se il tuo server debba essere configurato per restituire lo stesso guscio per ogni percorso. È proprio questo passaggio lato server a essere dimenticato, ed è il motivo per cui una SPA impeccabile in sviluppo può restituire un 404 quando un visitatore ricarica un link profondo in produzione.

I compromessi, in tutta onestà

Ma il modello SPA porta compromessi onesti che devi progettare attorno piuttosto che ignorare. Il primo caricamento è più pesante, perché il browser deve scaricare ed eseguire un bundle JavaScript prima di mostrare contenuto significativo, il che può danneggiare l'esperienza su connessioni lente o dispositivi modesti. Se quel bundle cresce senza controllo, la stessa velocità promessa dalla SPA può trasformarsi in una schermata iniziale lenta e vuota.

Ricerca e accessibilità meritano cura particolare. Poiché gran parte del contenuto è renderizzato da JavaScript dopo il caricamento, i motori di ricerca e gli strumenti che non eseguono script possono vedere una shell vuota a meno che tu non prenda misure deliberate. Anche il routing lato client deve essere implementato con attenzione affinché il pulsante indietro del browser, i deep link e la cronologia si comportino come gli utenti si aspettano, anziché rompersi in modi sottili.

Il rendering lato server in soccorso

La risposta del settore a questi compromessi è il rendering lato server e i suoi parenti. Meta-framework come Next.js per React e Nuxt per Vue renderizzano la pagina iniziale sul server così che l'utente - e i motori di ricerca - ottengano contenuto reale immediatamente, poi lo «idratano» in una SPA completa nel browser. Questo ibrido mantiene il primo paint veloce dei siti tradizionali e la navigazione fluida di una SPA, motivo per cui così tante app moderne lo adottano.

Scegliere la SPA con cognizione di causa

Niente di tutto questo rende la SPA universalmente giusta o sbagliata. Un sito di contenuti fatto perlopiù di articoli può essere servito meglio da un approccio tradizionale o statico, mentre un'applicazione riccamente interattiva beneficia enormemente del modello SPA. L'abilità sta nello scegliere deliberatamente, sapendo che «pagina singola» ti compra interattività fluida in cambio di un primo caricamento più pesante e di più responsabilità per ricerca e accessibilità.

Compresa così, la single-page application non è una parola d'ordine ma una scelta architetturale specifica con punti di forza chiari e costi chiari. Si carica una volta, gira nel browser e sembra un'app - e quando la abbini al rendering lato server, puoi avere gran parte di quel beneficio senza pagarne il prezzo pieno. Conoscere i compromessi è ciò che ti permette di ricorrervi al momento giusto.