¿Qué es el renderizado en servidor (SSR)?

El renderizado en servidor genera el HTML de una página en un servidor o en un runtime edge para cada solicitud, y luego envía el marcado ya renderizado al navegador. Para los storefronts de comercio headless, SSR es la estrategia de renderizado por defecto cuando el contenido es muy dinámico, está personalizado o necesita ser amigable para SEO sin esperar a JavaScript del lado del cliente.

Definición

SSR ejecuta el mismo árbol de componentes que en otro caso se renderizaría en el navegador, pero lo hace sobre Node.js, Bun, Deno o un edge worker como Cloudflare Workers o Vercel Edge. El servidor obtiene datos de las API de comercio, contenido, búsqueda y personalización, produce un documento HTML y lo envía al cliente. El navegador recibe un primer renderizado significativo con rapidez, y a continuación un paquete de JavaScript toma el control mediante hidratación para hacer la página interactiva. SSR viene integrado de fábrica en Next.js, Nuxt, Remix, SvelteKit y Astro, y a menudo se combina con estrategias de caché como ISR o stale-while-revalidate.

Por qué importa

SSR es el camino más seguro hacia un buen LCP y un TTFB aceptable en páginas donde los datos cambian con demasiada frecuencia para la generación estática o donde se requiere personalización. Permite que los motores de búsqueda indexen el marcado completo, algo que importa en páginas de categoría, PDP y contenido de blog. En los stacks de comercio composable, SSR también centraliza la orquestación de API: el servidor del storefront puede repartir llamadas en paralelo al backend de comercio, al CMS, a la búsqueda y a los servicios de recomendación, y luego ensamblar un documento coherente. Esto protege al cliente de la complejidad de las API y estabiliza los Core Web Vitals.

Casos de uso

Los casos de uso típicos de SSR incluyen carritos de usuarios registrados, precios localizados, PDP con conocimiento de inventario y variantes de landing page personalizadas. Los equipos headless en Next.js a menudo combinan SSR con React Server Components y Streaming SSR para enviar HTML temprano mientras se resuelven los datos pesados. El Edge Rendering en Vercel Edge o Cloudflare Workers acerca el SSR a los usuarios en storefronts globales. Las estrategias de capa de caché guardan el HTML completo para tráfico anónimo y recurren a SSR por solicitud para sesiones personalizadas. SSR ya casi nunca es una elección binaria; los stacks modernos combinan SSR, SSG, ISR y CSR por ruta para equilibrar frescura, coste y rendimiento.

Relacionado

Explora Composable Headless Frontend · Performance and Core Web Vitals.