01Qué es y cómo funciona
Server-side rendering (SSR) ejecuta la plantilla de la página en el servidor para cada solicitud. El servidor construye el final HTML, inyecta cualquier dato dinámico y devuelve el marcado completo. El navegador recibe un HTML listo para mostrar, por lo que el JavaScript del lado del cliente solo necesita mejorar la página, no crear el diseño.
SSR significa que el servidor crea la página web completa y envía el HTML al usuario.
02Qué hacer al respecto
- Prueba el renderizado con
curl -I https://example.comy visualiza el código fuente. - Asegúrate de que los datos necesarios para la página se obtengan en el servidor y no solo en el cliente.
- Añade las meta tags requeridas (title, description) en el HTML renderizado.
- Habilita el almacenamiento en caché de la salida de SSR a través de un CDN o un servidor edge.
03Cómo se mide o se detecta
Inspecciona el código fuente de la página para ver el HTML completamente renderizado; en Google Search Console, la herramienta de Inspección de URLs muestra la versión renderizada; Lighthouse reporta un First Contentful Paint más alto cuando SSR está activo.
04Errores comunes
- Asumir que el client-side rendering será indexado por los motores de búsqueda.
- No escapar la entrada del usuario, lo que puede derivar en vulnerabilidades XSS.
- Desactivar la caché para las páginas con SSR, lo que provoca una alta carga en el servidor.
- Usar SSR para páginas estáticas que nunca cambian, añadiendo una complejidad innecesaria.
05Cuando no aplica o se confunde con
SSR no es necesario para páginas totalmente estáticas; añade carga al servidor. Puede confundirse con el client-side rendering (CSR) o con funciones serverless que solo devuelven JSON, no HTML completo.
06Ejemplo práctico
El servidor renderiza la plantilla, inyecta{{title}}y{{content}}, y luego devuelve <html><body><h1>{{title}}</h1><p>{{content}}</p></body></html>.
La entrada anterior está escrita por GetLoopLoop. Lo que sigue es lo que los catálogos independientes recogen sobre el mismo término; nada de ello es la fuente de esta página.
- Tipo de cosa
- término del software informático
El mismo término en Wikipedia
Catalogado en 2 idiomas07Preguntas frecuentes
¿Es necesario el server-side rendering para todos los sitios web, o puedo usar páginas estáticas en su lugar?
SSR no es necesario para todos los sitios web. Las páginas totalmente estáticas que están pre-construidas y se sirven directamente pueden lograr un excelente rendimiento de SEO sin la complejidad adicional del servidor. Elige la generación estática cuando el contenido no cambie con frecuencia y puedas reconstruir el sitio en cada actualización; elige SSR cuando el contenido deba personalizarse por usuario o actualizarse en tiempo real.
¿Cómo puedo saber si una página está utilizando server-side rendering?
Ve el código fuente de la página en tu navegador para ver si el HTML inicial ya contiene el contenido en lugar de marcadores de posición vacíos. El HTML renderizado en la Inspección de URLs de Google Search Console también muestra la versión generada por el servidor. Lighthouse reportará una puntuación de First Contentful Paint más alta cuando la página llegue con el contenido listo.
¿Indexa Google las páginas con Server-side rendering de forma diferente a las páginas renderizadas en el lado del cliente?
Google indexa ambas correctamente, pero SSR proporciona el contenido de inmediato sin requerir la ejecución de JavaScript. Esto significa que no hay riesgo de fallos de indexación debido a un JavaScript lento o bloqueado, y el presupuesto de rastreo se utiliza de forma más eficiente porque el contenido está disponible en la primera solicitud.
¿Cuáles son las desventajas de cambiar a Server-side rendering?
SSR añade carga al servidor porque cada solicitud de página requiere computación para generar el HTML. Esto puede aumentar la latencia, especialmente bajo un tráfico alto, y eleva los costes de alojamiento en comparación con la entrega de archivos estáticos. Se deben monitorizar los tiempos de respuesta y la capacidad de la infraestructura tras el cambio.
¿Cómo implemento Server-side rendering para un framework de JavaScript?
La mayoría de los frameworks modernos de JavaScript admiten SSR de forma nativa o mediante adaptadores oficiales. Next.js se ejecuta en el servidor por defecto, mientras que Nuxt hace lo mismo para Vue. Para aplicaciones de React, frameworks como Remix o Astro pueden configurarse para renderizar en el servidor. Su proveedor de hosting o su equipo de DevOps determinará el método de despliegue en función de su infraestructura.
08Preguntado en voz alta
El mismo término en las palabras que alguien usa al hablar con un asistente en lugar de escribir en un buscador: escrito desde la situación, y por eso cada pregunta lleva la situación de la que salió.
Por lo general no, pero depende de cómo esté construido su sitio. Si las páginas renderizan el contenido en el navegador con JavaScript, es posible que los motores de búsqueda no lo vean hasta que ejecuten ese código. El Server-side rendering soluciona esto enviando el HTML completo desde el servidor, de modo que Google pueda leerlo inmediatamente sin esperar a que se ejecute JavaScript.
No, para un blog que no cambia por usuario, las páginas estáticas son más rápidas y económicas. El Server-side rendering es necesario cuando cada visitante puede ver contenido diferente o cuando se necesitan datos en tiempo real en la página. Un blog sencillo con publicaciones publicadas suele funcionar mejor como archivos estáticos preconstruidos.
View the page source in your browser and look for your actual text content versus empty divs or loading indicators. If the content is missing from the source but appears after the page loads, your framework is likely rendering on the client side. Server-side rendering would put the full content in the initial HTML that search engines see.
Míralo en Molfar
URL audit de Molfar compara el HTML original de una página con la página tras el JavaScript —title, canonical, meta robots, H1, descripción, enlaces añadidos y número de palabras— y lo marca en rojo cuando el JavaScript cambia el canonical o el meta robots.
Cómo funciona esta pantalla (en inglés)Sobre Molfar, nuestro rastreador de escritorio