¿Qué es el Streaming SSR?

El Streaming SSR es una técnica de renderizado en el servidor en la que el servidor envía el HTML al navegador en fragmentos en cuanto partes de la página están listas, en lugar de esperar a la respuesta completa. Para las tiendas online que dependen de muchas APIs upstream, el streaming convierte renderizados agregados lentos en pintados progresivos y rápidos.

Definición

Frameworks modernos como Next.js, Remix y SvelteKit implementan el streaming mediante la web streams API, las funciones renderToPipeableStream o renderToReadableStream de React 18, y los límites de Suspense. El proceso de renderizado empieza enviando el shell del documento, las etiquetas head y el contenido situado por encima del pliegue. Los segmentos más lentos, como un widget del motor de recomendaciones o un bloque de personalización, se envuelven en fallbacks de Suspense y se sustituyen por el contenido real a medida que se resuelven. El navegador recibe una única respuesta HTTP larga y va pintando de forma progresiva, lo que mejora tanto la percepción del TTFB como el LCP. El streaming combina de forma natural con React Server Components, con el Edge Rendering en Vercel Edge o Cloudflare Workers, y con una capa de caché agresiva para las peticiones de datos.

Por qué es importante

Sin streaming, la llamada de API más lenta determina el TTFB. Una API de comercio de 300 ms, más una llamada de personalización de 250 ms, más una lectura del CMS de 200 ms, pueden superar con facilidad un presupuesto de TTFB de 750 ms. El Streaming SSR rompe ese límite emitiendo el shell después de la dependencia más rápida y completando el resto a continuación. El LCP puede dispararse sobre contenido ya transmitido mientras el resto todavía se resuelve. En términos de Core Web Vitals, el efecto práctico es notable: pintados más rápidos, menos pantallas en blanco y un INP más estable porque la hidratación se ejecuta de forma progresiva. También reduce la presión de memoria en el servidor porque no es necesario mantener un buffer de respuesta grande.

Casos de uso

Las tiendas headless construidas sobre el App Router de Next.js transmiten primero su shell y la información principal del producto, y después van revelando progresivamente las reseñas, los productos relacionados, los carruseles del motor de recomendaciones y los banners personalizados. Las PLP transmiten los filtros y la primera página de productos mientras se resuelven las facetas más pesadas. El Edge Rendering acelera aún más este patrón al ejecutar el renderizador de streaming en los PoP cercanos al usuario. El streaming también permite un Suspense de grano fino para servicios downstream lentos, de modo que un proveedor de personalización poco fiable no pueda bloquear todo el documento. En un stack de comercio composable, el Streaming SSR suele ser la capacidad decisiva que hace que el SSR sea lo bastante rápido como para sustituir un renderizado en cliente pesado.

Relacionado

Explora Composable Headless Frontend · Performance and Core Web Vitals.