Ciao, e benvenuto nella terza puntata della settantottesima stagione. La volta scorsa, la cucina contro il tavolo, e il desiderio di avere entrambi. Oggi vediamo cosa succede proprio quando allunghi la mano verso entrambi: lo stato strano, a metà, di una pagina moderna fatta dal server. Il titolo: si vede ma non si tocca.
Seguiamo il ciclo di vita, momento per momento. Una pagina moderna fatta dal server attraversa fasi distinte. Prima, il server cucina e impiatta: esegue i tuoi componenti con i dati e produce l'HTML completo. Secondo, il browser la mostra: l'HTML arriva e, con la catena della stagione scorsa, viene analizzato, stilizzato, messo in scena, dipinto. Appare una pagina completa, in fretta. Chi guarda vede un piatto finito. Terzo, ma è inerte. Clicchi un bottone: niente. Apri un menu: niente. Il piatto sembra pronto, ma nulla risponde, perché nessun comportamento è ancora attaccato. L'HTML ha la forma, ma non la vita. Quarto, intanto la scatola di istruzioni sta scaricando. Quinto, quando arriva e gira, attacca il comportamento, e la pagina finalmente risponde. Adesso puoi mangiare.
Diamo un nome al divario. Tra il visibile, la seconda fase, e l'interattivo, la quinta, c'è una finestra in cui la pagina sembra completamente pronta ma non fa niente. Chi guarda fissa un piatto perfetto senza posate, allunga la mano verso una forchetta che non c'è ancora. È la terra di mezzo del rendering lato server, ed è il prezzo di aver teso la mano verso entrambi i capi: hai ottenuto il primo sguardo veloce e completo, ma l'interattività è ancora per strada.
E può essere peggio di come sembra, ecco la crudeltà sottile. Nell'approccio del solo tavolo, la pagina è ovviamente non pronta: è vuota, aspetti, sai di dover aspettare. Nell'approccio fatto dal server, la pagina sembra del tutto finita, quindi chi guarda prova a usarla, clicca, scrive, e non succede niente, o peggio, i clic vengono inghiottiti e persi. Sembra pronta ma non lo è può essere più frustrante di ovviamente non ancora pronta, perché invita a un'interazione che non può ancora onorare. Più bello è il primo sguardo, più netto si sente questo divario se il comportamento tarda ad arrivare.
E qui il cuore concettuale: una pagina web ha due traguardi diversi, e il rendering lato server li separa in un modo che i vecchi approcci puri non facevano. Uno: sembra giusta, i pixel sono corretti, il contenuto c'è. Due: funziona giusta, il comportamento è attaccato, le interazioni rispondono. Le vecchie pagine del server tagliavano i due traguardi insieme, ma la seconda asticella era bassa, poca interattività. L'applicazione pura non tagliava nessuno dei due fino a tardi, e poi li tagliava insieme. Il rendering lato server taglia apposta il primo traguardo presto e il secondo dopo, e tutto il mestiere del rendering moderno sta nell'accorciare la distanza tra loro, o nel rendere onesta l'attesa.
Cosa fa da ponte sul divario? Il passo che trasforma sembra giusta in funziona giusta, che attacca la vita alla forma già dipinta, ha un nome: l'idratazione. È la sala che apparecchia il tuo posto sopra il piatto già impiattato, senza rifare il piatto, ma rendendolo finalmente usabile. La prossima puntata è tutta su cosa fa e perché è il cuore della macchina. Per ora tieni a mente il ciclo di vita in quattro momenti: cucinata dal server, mostrata dal browser, inerte per un attimo, e poi, con l'idratazione, viva. Quattro momenti che il vecchio mondo teneva schiacciati in uno solo, e che oggi si srotolano nel tempo.
E nota il ritornello già in agguato. Il server ha costruito la pagina; adesso il client sta per costruire di nuovo la propria comprensione di quella stessa pagina, per attaccarle il comportamento. La stessa pagina, affrontata due volte, una per mostrarla, una per farla funzionare. Quel raddoppio è esattamente lo sposti il lavoro, e a volte lo paghi due volte, e ne vedremo presto il costo pieno.
Voglio lasciarti con la distinzione che spiega metà dei misteri del rendering lato server. Una pagina ha due traguardi diversi: sembrare giusta ed essere viva. Il rendering lato server li separa apposta: taglia presto il primo, mostrandoti un piatto completo, e taglia dopo il secondo, quando il comportamento si attacca. Il divario in mezzo è quello in cui la pagina si vede ma non si tocca, e non è un difetto da nascondere: è la conseguenza diretta di aver voluto il primo sguardo veloce senza rinunciare all'interattività. Quando una pagina ti sembra pronta ma non risponde, non è rotta: è viva solo a metà, e sta aspettando di essere completata. Capire questi due traguardi è il primo passo per non confonderli mai più.
Per oggi ci fermiamo qui. Abbiamo seguito il ciclo di vita, cucinata, mostrata, inerte, poi viva; dato un nome al divario tra il vedere e il toccare, con la crudeltà del sembra pronto ma non lo è; distinto i due traguardi di una pagina, sembrare giusta e funzionare giusta; e nominato il ponte che li unisce, l'idratazione. Nella prossima puntata: dare vita al piatto. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.