El renderizado web puede ocurrir en dos sitios: en el servidor (SSR, Server Side Rendering: el HTML llega ya montado al navegador) o en el cliente (CSR, Client Side Rendering: el navegador recibe JavaScript y construye la página). La diferencia parece técnica, pero decide si los buscadores —y cada vez más, los bots de la IA— pueden leer tu contenido.
Hoy vamos a aclarar de una vez por todas qué son y en qué consisten dos técnicas muy comunes en el desarrollo web: el Server Side Rendering (SSR) y el Client Side Rendering (CSR). Si alguna vez te has liado con estos términos, tranquilo, aquí te lo explico de forma sencilla, clara y directa. Además, te hablaré de soluciones específicas que pueden mejorar el SEO en aplicaciones que usan CSR.
¿Qué es el Server Side Rendering (SSR)?
El Server Side Rendering, o renderizado del lado del servidor, es una técnica donde el servidor genera el contenido HTML completo antes de enviarlo al navegador. Es como si el servidor fuera un chef que cocina el plato completamente preparado antes de servirlo al cliente. Así, el usuario recibe el contenido listo para ser visto desde el primer momento.
¿Cómo funciona el SSR?
- Petición al servidor: Cuando el usuario entra en la web, el servidor recibe la solicitud.
- Generación del HTML: El servidor crea el HTML completo de la página.
- El navegador lo pinta: El navegador recibe este HTML y lo muestra inmediatamente, aunque la web todavía no es interactiva.
- Descarga del JavaScript: Para que todo funcione de manera dinámica (botones, menús, etc.), el navegador descarga y ejecuta el JavaScript.
Ventajas del SSR
- Carga inicial rápida: El contenido estático aparece en pantalla casi al instante.
- SEO amigable: Los motores de búsqueda rastrean y entienden el contenido sin problemas, ya que el HTML ya viene preparado.
Desventajas del SSR
- Carga en el servidor: El servidor trabaja más porque debe generar todo el contenido antes de enviarlo.
- Interactividad más lenta: Hasta que no se carga el JavaScript, la web no es completamente funcional.
¿Qué es el Client Side Rendering (CSR)?
En el Client Side Rendering, el proceso cambia radicalmente. Aquí es el navegador quien recibe los ingredientes (datos y JavaScript) y se encarga de montar la página web. En este caso, el servidor hace menos trabajo y el navegador asume el papel protagonista.
¿Cómo funciona el CSR?
- El servidor manda los ingredientes: En lugar de un HTML completo, el servidor envía los archivos necesarios (JavaScript y datos).
- El navegador cocina la página: El navegador descarga y ejecuta el JavaScript para montar el HTML.
- El contenido aparece: Una vez que el navegador termina de procesarlo todo, el usuario ve la página completa.
Ventajas del CSR
- Menor carga en el servidor: El servidor no tiene que preparar el HTML completo.
- Ideal para webs dinámicas: Perfecto para aplicaciones interactivas como redes sociales o servicios de correo.
Desventajas del CSR
- Tiempo de carga inicial lento: El usuario no ve nada hasta que el navegador termina de procesar el JavaScript.
- Problemas de SEO: Aquí entra un punto importante que veremos a detalle más adelante.
Diferencias principales entre SSR y CSR
Característica | Server Side Rendering (SSR) | Client Side Rendering (CSR) |
Dónde se genera el HTML | En el servidor | En el navegador |
Velocidad inicial | Más rápida | Más lenta |
Interactividad | Se activa tras cargar el JavaScript | Completa al terminar de renderizar |
SEO | Muy amigable para SEO | Puede ser problemático (soluciones: Dynamic Rendering, Pre-Rendering) |
Carga en el servidor | Alta | Baja |
Usos comunes | Blogs, e-commerce, sitios de noticias | Aplicaciones dinámicas, redes sociales |
¿Y el SEO en CSR? Soluciones modernas para no perder visibilidad
Una de las mayores críticas al Client Side Rendering es que puede ser un dolor de cabeza para el SEO. ¿Por qué? Porque los motores de búsqueda, aunque son cada vez mejores ejecutando JavaScript, aún pueden tener problemas para procesar contenido generado dinámicamente. Sin embargo, hay formas de mitigar estos problemas:
1. Dynamic Rendering
Esta técnica combina lo mejor de SSR y CSR. ¿Cómo funciona?
- Los motores de búsqueda reciben una versión pre-renderizada de la página (con HTML ya generado) directamente desde el servidor.
- Los usuarios normales, en cambio, reciben la versión estándar que usa CSR.
Esta solución es ideal para aplicaciones complejas que necesitan optimizar tanto el rendimiento como el SEO. Herramientas como Rendertron o servicios como Prerender.io son opciones populares para implementar Dynamic Rendering.
2. Pre-Rendering
Con esta técnica, se generan versiones HTML estáticas de las páginas durante el proceso de construcción (build) de la aplicación. Así, cuando un motor de búsqueda solicita la página, recibe el HTML completo y listo para indexar.
- Este método es común en frameworks modernos como Next.js o Gatsby, donde puedes configurar fácilmente páginas pre-renderizadas para SEO mientras mantienes la interactividad del CSR.
Los bots de la IA no ejecutan JavaScript (y eso cambia la elección)
Esto es lo que casi nadie te cuenta cuando compara SSR y CSR: Googlebot renderiza JavaScript (con sus limitaciones y su cola de renderizado), pero los rastreadores de la IA no lo hacen. GPTBot (ChatGPT), ClaudeBot (Claude) o PerplexityBot leen el HTML tal cual llega del servidor.
La consecuencia es directa: si tu contenido depende del Client Side Rendering, para un LLM tu página puede estar prácticamente vacía. No hay cola de renderizado ni segunda oportunidad: lo que no esté en el HTML inicial, para la IA no existe. Y si la IA no puede leerte, no puede citarte ni recomendarte.
Si quieres saber cuánto contenido de tu web depende de JavaScript, puedes medirlo URL por URL con Screaming Frog. Te enseño cómo en el tutorial para ver el porcentaje de palabras que carga JavaScript.
Con los AI Overviews, ChatGPT y Perplexity respondiendo cada vez más búsquedas, el renderizado ha pasado de ser un tema de SEO técnico a ser un tema de visibilidad total. Si quieres saber cómo ve tu web un agente de IA, eso es exactamente lo que reviso en la Auditoría Web Agent.
¿Cuál deberías elegir?
Depende del proyecto.
- Server Side Rendering (SSR):
Es ideal para sitios donde el SEO y la velocidad inicial son cruciales, como blogs, tiendas online o páginas de noticias. - Client Side Rendering (CSR):
Perfecto para aplicaciones web dinámicas con alta interacción, como redes sociales o herramientas colaborativas. Si el SEO es importante, considera implementar Dynamic Rendering o Pre-Rendering para compensar los puntos débiles.
En resumen, no hay una solución única. La clave está en entender las necesidades de tu proyecto y elegir la técnica (o combinación de técnicas) que mejor se ajuste.
