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.

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.