Per rendering si intende il processo di creazione del codice necessario per creare una pagina con cui gli utenti finali possono interagire tramite il proprio browser. Ciò include la preparazione dei contenuti, l'applicazione della logica e l'elaborazione e l'inclusione di eventuali elementi dell'interfaccia utente e altri componenti necessari per visualizzare la pagina finale. Le applicazioni basate sui contenuti si concentrano su velocità di caricamento, bassa latenza e tempi di rendering rapidi.
Rendering lato server (SSR)
Il rendering lato server (SSR) prevede il rendering delle pagine web sul server e, successivamente, l'invio al browser del client del rendering completo dell'HTML visualizzato, anziché il rendering sul lato client con JavaScript. Quando gli utenti accedono a un'applicazione, il loro browser invia una richiesta al server. L'applicazione elabora la richiesta sul server, inclusa la raccolta dei dati da database o API esterne, quindi esegue il rendering del codice HTML della pagina richiesta. Il server invia quindi l'HTML completo della pagina al browser dell'utente. Quando il browser dell'utente riceve il codice HTML, carica tutti i file JavaScript richiesti.
I vantaggi dell'uso di SSR includono una velocità di caricamento iniziale elevata, buone prestazioni di ottimizzazione per i motori di ricerca (SEO), affidabilità e una buona esperienza utente complessiva. Tuttavia, l'implementazione SSR può essere più complessa da implementare rispetto al rendering lato client (CSR) a causa dell'overhead delle prestazioni e della competenza di sviluppo necessaria per creare e gestire applicazioni compatibili con SSR. SSR è particolarmente utile per applicazioni web basate sui contenuti, piattaforme di e-commerce e qualsiasi applicazione che richieda buone prestazioni SEO e rapide velocità di risposta iniziali.
Generazione di siti statici (SSG)
La generazione di siti statici (SSG) genera file HTML statici al momento della creazione e li fornisce agli utenti senza rendering lato server o lato client. Vengono creati contenuti web, di solito in un formato strutturato come Markdown, JSON o YAML, e includono testo, immagini e altri asset. Uno strumento per la generazione di siti statici, come Hugo o Jekyll, elabora i contenuti e genera file HTML, CSS e JavaScript. L'output statico corrisponde all'intero sito web e il deployment di questi file statici viene eseguito su un server web, una CDN o un servizio di hosting.
Scopri di più su CSS e HTML all'indirizzo web.dev.
Poiché i file sono statici, possono essere memorizzati nella cache e quindi essere caricati molto rapidamente. SSG è una buona opzione per le applicazioni web che non cambiano spesso o per quelle che vengono aggiornate tramite build periodiche del sito. Non è adatto alle applicazioni web con interattività dinamica.
Rendering lato client (CSR)
Il rendering lato client viene eseguito sul browser del client, non sul server. Le applicazioni web vengono spesso caricate con modelli HTML minimi e quindi i contenuti vengono manipolati in modo dinamico utilizzando JavaScript e i dati provenienti da server o API. Dopo la richiesta di un'applicazione, il server invia un documento HTML minimo con la struttura di base e il codice JavaScript necessari per il rendering della pagina. Il codice JavaScript viene eseguito nel browser dell'utente. A questo punto, il codice elabora i dati recuperati e genera i contenuti, inclusi CSS, HTML e tutti gli elementi interattivi. Il codice JavaScript risponde quindi all'interazione dell'utente, ad esempio all'invio di un modulo.
I vantaggi dell'assistenza clienti sono la rapida transizione delle pagine e le interfacce reattive. Le applicazioni web basate su CSR hanno spesso tempi di caricamento iniziali lenti rispetto alle versioni SSR e possono presentare difficoltà relative alla SEO. Man mano che crescono, le applicazioni di CSR possono diventare piuttosto complesse da sviluppare e gestire.