Cos'è il Server-Side Rendering (SSR)?

Il Server-Side Rendering genera l'HTML di una pagina su un server o su un runtime edge per ogni richiesta, per poi inviare al browser il markup completamente renderizzato. Per gli storefront headless-commerce, l'SSR è la strategia di rendering predefinita quando il contenuto è molto dinamico, personalizzato, o deve essere SEO-friendly senza attendere il JavaScript lato client.

Definizione

L'SSR esegue lo stesso albero di componenti che verrebbe altrimenti renderizzato nel browser, ma lo esegue su Node.js, Bun, Deno o un edge worker come Cloudflare Workers o Vercel Edge. Il server recupera i dati dalle API di commerce, contenuto, ricerca e personalizzazione, produce un documento HTML e lo invia al client. Il browser riceve rapidamente un first paint significativo, poi un bundle JavaScript prende il controllo tramite hydration per rendere la pagina interattiva. L'SSR è offerto nativamente da Next.js, Nuxt, Remix, SvelteKit e Astro, e viene spesso combinato con strategie di caching come ISR o stale-while-revalidate.

Perché è importante

L'SSR è il percorso più sicuro per ottenere un buon LCP e un TTFB accettabile sulle pagine in cui i dati cambiano troppo spesso per la static-site-generation o dove è richiesta la personalizzazione. Permette ai motori di ricerca di indicizzare markup completo, un aspetto rilevante per le pagine di categoria, le PDP e i contenuti blog. Negli stack composable-commerce, l'SSR centralizza anche l'orchestrazione delle API: il server dello storefront può interrogare in parallelo il backend commerce, il CMS, la ricerca e i servizi di raccomandazione, per poi assemblare un documento coerente. Questo isola il client dalla complessità delle API e stabilizza i Core Web Vitals.

Casi d'uso

I casi d'uso tipici dell'SSR includono carrelli con utente autenticato, prezzi localizzati, PDP consapevoli della disponibilità di magazzino e varianti di landing page personalizzate. I team headless su Next.js combinano spesso l'SSR con i React Server Components e lo Streaming SSR per inviare l'HTML iniziale mentre i dati più pesanti vengono risolti. L'Edge Rendering su Vercel Edge o Cloudflare Workers porta l'SSR più vicino agli utenti per gli storefront globali. Le strategie a livello di cache memorizzano l'HTML completo per il traffico anonimo e ricorrono all'SSR per singola richiesta per le sessioni personalizzate. L'SSR non è più quasi mai una scelta binaria; gli stack moderni combinano SSR, SSG, ISR e CSR per ogni route per bilanciare freschezza, costo e performance.

Contenuti correlati

Scopri Composable Headless Frontend · Performance and Core Web Vitals.