Ciao, e benvenuto nella sesta puntata della cinquantottesima stagione. Nella scorsa puntata abbiamo capito che l'applicazione gira in due mondi, il server e il browser. Oggi affrontiamo la conseguenza più pratica e insidiosa di questo fatto, quella che confonde di più chi inizia: quando devi prendere dei dati, in quale dei due mondi li prendi? Oggi parliamo di come prendere i dati nel posto giusto.
Partiamo dal problema, perché nasce proprio dai due mondi. Immagina una pagina che deve mostrare un elenco di articoli presi da una fonte di dati. Con la vecchia applicazione che gira solo nel browser, era semplice: la pagina si carica vuota, poi il browser va a prendere i dati e li mostra. Un solo mondo, una sola strada. Ma ora la pagina viene costruita prima sul server. Quindi: chi va a prendere i dati? Il server, mentre costruisce la pagina? Oppure il browser, dopo? E se li prende il server, quando la pagina si risveglia nel browser, non rischia il browser di andare a riprenderli una seconda volta, sprecando un viaggio inutile?
Voglio dirti la soluzione elegante, perché è il cuore. Nuxt risolve questo enigma con un meccanismo pulito. Quando usi i suoi strumenti giusti per prendere i dati, ecco cosa accade. Durante la costruzione sul server, il server va a prendere i dati e costruisce la pagina già piena. Ma non finisce lì: infila anche i dati appena presi in un piccolo pacchetto, nascosto dentro la pagina che spedisce al browser. Così, quando la pagina si risveglia con l'idratazione, il browser trova i dati già lì, nel pacchetto, e li riusa, invece di andare a richiederli daccapo. I dati vengono presi una volta sola, sul server, e viaggiano insieme alla pagina. Niente doppio viaggio.
Voglio darti l'immagine che rende chiara questa idea, perché la fissa. Pensa a un ristorante che fa anche consegne a domicilio. Il modo stupido sarebbe: il cuoco prepara il piatto, e poi, quando arriva a casa tua, tu devi ricomprare tutti gli ingredienti e ricontrollare la ricetta per essere sicuro di cosa stai mangiando. Assurdo, no? Il modo intelligente, quello di Nuxt, è: il cuoco prepara il piatto e ci allega un bigliettino con tutti gli ingredienti già scritti. Quando il piatto arriva, tu hai già tutto: non devi rifare la spesa, le informazioni viaggiano insieme al piatto. Il pacchetto di dati nascosto nella pagina è esattamente quel bigliettino: la spesa è già fatta, e fatta una volta sola.
Voglio darti la trappola più comune, perché è quella che frega tutti. Ma attenzione, perché qui si nasconde l'errore più frequente in assoluto. Se, invece degli strumenti giusti, prendi i dati nel modo sbagliato, tutto sembra funzionare in apparenza, ma perdi il pacchetto: il server prende i dati, e poi il browser li riprende una seconda volta, raddoppiando il lavoro senza che tu te ne accorga. Oppure, ancora peggio, scrivi del codice pensando che giri sul server, e invece gira anche nel browser, esponendo magari un segreto che doveva restare nascosto. La domanda quale codice gira dove non è un dettaglio teorico: è la domanda pratica più importante quando lavori in due mondi.
Voglio darti la regola pratica, perché è ciò che ti serve. La regola è: usa sempre gli strumenti che il framework ti dà apposta per prendere i dati, perché sono fatti per gestire correttamente il passaggio tra i due mondi. E, ogni volta che scrivi codice che tocca dati, fatti la domanda: questo pezzo dove deve girare? Se parla con un database o maneggia un segreto, deve stare sul server, e solo sul server. Se reagisce a un clic dell'utente, vive nel browser. Tenere sempre a mente questa mappa mentale, quale codice appartiene a quale mondo, è la competenza che distingue chi domina il rendering universale da chi lo subisce.
Voglio darti la lezione generale, perché va oltre Nuxt. La lezione è che, quando un sistema vive in due luoghi, la domanda dove accade questa cosa diventa fondamentale quanto cosa accade. Non è più abbastanza sapere cosa fa il tuo codice: devi sapere anche dove viene eseguito, perché lo stesso identico codice, in un posto è sicuro e nell'altro è pericoloso, in un posto è efficiente e nell'altro è uno spreco. La consapevolezza del luogo è una forma di comprensione della macchina, ed è esattamente ciò che gli strumenti comodi tendono a nascondere, fino al giorno in cui ti presentano il conto.
Per oggi ci fermiamo qui. Abbiamo visto come prendere i dati nel posto giusto. In un'applicazione che gira in due mondi, la domanda è: chi prende i dati, il server o il browser? Nuxt risolve con eleganza: gli strumenti giusti prendono i dati sul server durante la costruzione, li infilano in un pacchetto nascosto nella pagina, e il browser li riusa al risveglio, senza doppio viaggio. Come un piatto consegnato col bigliettino degli ingredienti: la spesa è già fatta. Ma la trappola è dietro l'angolo: prendere i dati nel modo sbagliato raddoppia il lavoro, o peggio, espone un segreto. La regola: usa gli strumenti giusti, e chiediti sempre dove gira ogni pezzo di codice. Nella prossima puntata: perché tutto questo sforzo, ovvero visibilità e prestazioni. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.