Cos'è lo Streaming SSR?

Lo Streaming SSR è una tecnica di server-side rendering in cui il server invia l'HTML al browser a blocchi, non appena le parti della pagina sono pronte, invece di attendere l'intera risposta. Per gli storefront commerce che dipendono da molte API a monte, lo streaming trasforma render aggregati lenti in paint progressivi e rapidi.

Definizione

Framework moderni come Next.js, Remix e SvelteKit implementano lo streaming tramite la web streams API, renderToPipeableStream o renderToReadableStream di React 18 e i boundary Suspense. Il percorso di rendering inizia inviando lo shell del documento, i tag head e il contenuto sopra la piega. I segmenti più lenti, come un widget del motore di raccomandazione o un blocco di personalizzazione, sono racchiusi in fallback Suspense e vengono sostituiti con il contenuto reale non appena si risolvono. Il browser riceve un'unica risposta HTTP lunga e dipinge progressivamente, il che migliora sia la percezione del TTFB che l'LCP. Lo streaming si combina naturalmente con i React Server Components, l'Edge Rendering su Vercel Edge o Cloudflare Workers e un cache-layer aggressivo per il recupero dei dati.

Perché è importante

Senza streaming, la chiamata API più lenta definisce il TTFB. Un'API commerce di 300 ms più una chiamata di personalizzazione di 250 ms più una lettura CMS di 200 ms possono facilmente superare un budget di TTFB di 750 ms. Lo Streaming SSR abbatte questo limite emettendo lo shell dopo la dipendenza più rapida, per poi riempire il resto. L'LCP può scattare su contenuto già trasmesso mentre il resto si risolve ancora. Per i Core Web Vitals, l'effetto pratico è notevole: paint più rapidi, meno schermate vuote e un INP più stabile perché l'hydration procede in modo progressivo. Riduce inoltre la pressione sulla memoria del server perché non viene mantenuto alcun grande buffer di risposta.

Casi d'uso

Gli storefront headless su Next.js App Router trasmettono prima il proprio shell e le informazioni principali del prodotto, poi rivelano progressivamente recensioni, prodotti correlati, caroselli del motore di raccomandazione e banner personalizzati. Le PLP trasmettono i filtri e la prima pagina di prodotti mentre le facet più pesanti si risolvono. L'Edge Rendering accelera ulteriormente questo pattern eseguendo il renderer di streaming nei PoP vicini all'utente. Lo streaming abilita anche un Suspense granulare per i servizi a valle lenti, così un fornitore di personalizzazione instabile non può bloccare l'intero documento. In uno stack composable-commerce, lo Streaming SSR è spesso la funzionalità decisiva che rende l'SSR abbastanza rapido da sostituire un pesante client-side rendering.

Correlati

Scopri Composable Headless Frontend · Performance and Core Web Vitals.