Ciao, e benvenuto nella quarta puntata della quarantottesima stagione. Oggi vediamo un trucco elegante con cui Next ti dà due cose che sembrano in contrasto: una pagina che appare subito, e una pagina pienamente interattiva. Di solito devi scegliere: o veloce ad apparire, o subito viva. Next fa entrambe, in due tempi. Oggi capiamo come mostra prima e anima dopo: la pagina che prende vita.
Partiamo dalla tensione, perché è il problema da risolvere. Da un lato, l'HTML già pronto che arriva dal server appare in fretta, ma è inerte: è solo una fotografia della pagina, non ci puoi interagire. Dall'altro, un'applicazione costruita nel browser è interattiva, ma lenta ad apparire: resta una schermata vuota finché il codice non ha finito di lavorare. Veloce ma morta, oppure viva ma lenta ad arrivare. Sembra una scelta obbligata, e per anni lo è stata: o l'una, o l'altra.
Voglio darti la risposta di Next, perché scioglie il nodo. Next fa una cosa astuta: le fa tutte e due, in ordine. Primo tempo: manda dal server l'HTML già finito. L'utente vede la pagina completa quasi subito, con tutti i contenuti, prima ancora che sia arrivato il codice interattivo. È una fotografia, sì, ma una fotografia completa e immediata. La schermata non è mai vuota. Poi arriva il secondo tempo, dietro le quinte, ed è lì che la pagina prende vita davvero.
Voglio spiegarti il secondo tempo, perché è il cuore del trucco. Nel secondo tempo, il codice interattivo si carica e risveglia la pagina. Attacca l'interattività all'HTML che è già lì, sullo schermo: i pulsanti iniziano a funzionare, i moduli rispondono. Questo risveglio ha un nome tecnico, idratazione, ma pensalo così: versare la vita e l'interattività dentro il guscio già visibile. Prima la fotografia immediata, poi la vita che vi entra dentro. L'utente ottiene il meglio dei due mondi: contenuto all'istante, e poco dopo la piena interattività. Vede subito, e presto può agire. È un modo intelligente di ingannare l'attesa: invece di far fissare all'utente una schermata vuota mentre tutto il codice si carica, gli si dà subito qualcosa di vero da guardare, e si fa il lavoro pesante mentre lui già legge. Il tempo di attesa non sparisce, ma viene riempito con qualcosa di utile.
Voglio darti il prezzo, con onestà, perché c'è e lo riprenderemo. Ma c'è un costo, e va detto. Per un istante, la pagina sembra pronta ma non lo è. Vedi un pulsante, ma cliccarlo non fa nulla, finché il risveglio non è finito. È una piccola terra di mezzo inquietante: una pagina che sembra viva ma ancora non lo è. E quel risveglio è anche lavoro costoso: a volte il browser rifà, per attaccare l'interattività, un lavoro che il server aveva già fatto per costruire la fotografia. La comodità dei due tempi si paga con questa piccola bugia momentanea, e con un po' di sforzo doppio.
Voglio darti l'immagine che rende chiara questa idea, perché è precisa. Pensa a un negozio che apre le porte con la vetrina già allestita e gli scaffali pieni: entri e vedi tutto all'istante, la merce è lì. Ma per il primo minuto il personale sta ancora arrivando: puoi guardare, ma non ancora comprare. La vetrina era vera, la merce era vera; la piena operatività è arrivata un attimo dopo. Chi entra vede subito un negozio completo, e solo se prova a pagare in quel primo minuto scopre che non è ancora del tutto pronto.
Voglio trarre la lezione generale, perché va oltre Next. La lezione è questa: mostrare qualcosa e farla funzionare sono due traguardi diversi, e un sistema astuto può separarli nel tempo, consegnando prima l'apparenza e poi la funzione. Ma lo spazio tra i due è un luogo reale, dove gli utenti vivono davvero, in quei secondi. E fingere che quello spazio non ci sia è il modo per ritrovarsi con un'interfaccia che mente sul proprio essere pronta: bella da vedere, frustrante da usare, perché promette con l'aspetto ciò che non mantiene ancora coi fatti. Chi progetta bene tiene conto di quella terra di mezzo, invece di far finta che l'apparenza e la funzione arrivino insieme, quando non è così.
Per oggi ci fermiamo qui. Abbiamo visto il trucco dei due tempi di Next, che scioglie la scelta tra veloce e interattivo. Primo tempo: il server manda l'HTML già finito, e l'utente vede la pagina completa quasi subito, ma inerte, una fotografia. Secondo tempo: il codice si carica e risveglia la pagina, attaccando l'interattività al guscio già visibile, ciò che tecnicamente si chiama idratazione. Così ottieni contenuto all'istante e piena vita poco dopo. Il prezzo: per un attimo la pagina sembra pronta ma non lo è, e il risveglio è lavoro costoso, a volte doppio. Come un negozio con la vetrina allestita ma il personale che sta ancora arrivando. La lezione: mostrare e far funzionare sono traguardi diversi, e lo spazio tra i due è un luogo reale. Nella prossima puntata vediamo come la cartella diventa la mappa. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.