¿Qué es SSR?

También llamado: Server-Side Rendering, renderizado en el servidor

Definición

SSR (Server-Side Rendering) significa generar el HTML de cada página en el servidor en el momento de la petición, para que el navegador reciba la página ya construida en lugar de montarla con JavaScript.

Es como funcionan desde siempre WordPress o cualquier web en PHP. El término se ha popularizado de nuevo con frameworks de JavaScript (Next.js, Nuxt, SvelteKit, Astro…) que permiten renderizar en el servidor componentes que antes solo se ejecutaban en el navegador, como en una SPA.

Ejemplo

Con SSR, el servidor responde con el contenido ya presente en el HTML:

<main>
  <h1>Zapatillas de running</h1>
  <ul>
    <li>Modelo A — 89 €</li>
    <li>Modelo B — 120 €</li>
  </ul>
</main>
<script src="/app.js" defer></script>

Después, el JavaScript «hidrata» la página: se engancha a ese HTML ya pintado para hacerlo interactivo.

Comparativa

	SSR	SSG	SPA
Cuándo se genera el HTML	En cada petición	Al construir el sitio	En el navegador
Contenido actualizado al momento	Sí	Al reconstruir	Sí
Carga del servidor	Alta	Mínima	Mínima (más la API)
SEO	Muy bueno	Muy bueno	Más difícil

Cosas que conviene saber

Necesita un servidor que ejecute código (Node, PHP…), no basta con un hosting de archivos estáticos.
Para no generar cada página en cada visita se combina con caché.

¿Tienes un producto o servicio relacionado con SSR? Anúnciate en este término.

Términos relacionados

Categorías: Frontend Backend