SEO Javascript: Diferencias entre Server Side Rendering y Client Side Rendering

Cuando un usuario de una aplicación web ingresa a una URL empieza el renderizado de lado del cliente: Primero el servidor envía al navegador un archivo HTML con un témplate y un archivo JavaScript (por dar un ejemplo). Luego en el navegador, el archivo JavaScript empieza a llenar el témplate HTML con los datos que hacen falta para crear la representación gráfica. Esta se crea una vez una vez el archivo HTML se complete con todos sus elementos.

La renderización de lado del cliente solo utiliza un HTML en donde se cargaran todos los recursos que vaya requiriendo la aplicación, lo que permite que no se tengan que cargar los mismos recursos una y otra vez con cada cambio de página.

A través de JavaScript se puede incluir y retirar dinámicamente el contenido sin tener que hacer nuevas peticiones al servidor, esto hace que la navegación sea mucho más rápida cuando se visitan varias páginas del mismo sitio.

¿Cuáles son las ventajas del CSR?

• Las páginas son mucho más dinámicas, especialmente cuando se utilizan Framewors de JavaScript cómo React, Vue o Angular.
• Una vez el usuario ha navegado el sitio, la carga de las páginas no se notará fácil mente.
• La aplicación solo hará las peticiones necesarias y utilizará los archivos necesarios para su funcionamiento.

¿Cuáles son las desventajas del CSR?

• La carga inicial de cada página es es lenta por primera vez aunque luego sea increíblemente rápida.
• Los bots de los motores de búsqueda deben regresar varias veces hasta poder entender el contenido, lo que hace que sea poco amigable con SEO.
• Las URLs de fragmentos o que usan parámetros para cargar información dinámica no son rastreadas por los Bots.
• La cantidad de JavaScript requerida para el funcionamiento de una aplicación tiende a crecer a medida que se desarrollan nuevas funcionalidades.

¿Cómo Afecta el CSR y el SSR al SEO?

Cómo lo explicamos anteriormente, la manera en que un sitio dinámico se renderiza puede afectar la capacidad de los bots para rastrear la información y esto evidentemente afecta al SEO. Esta es la razón principal de que los sitios construidos con Frameworks JavaScript tengan tan mala reputación. 

Con el SSR, el servidor debía construir los archivos HTML utilizando los recursos vinculados a él, luego se los entregaba al explorador y este los interpretaba para el usuario. De esta manera, los bots podían acceder fácilmente a esos archivos ya construidos y rastrear cada uno de los elementos responsables del posicionamiento (meta títulos, meta descripciones, textos, encabezados, imágenes, etiquetas alts, atributos de enlaces, entre otros).

Con el CSR, es el navegador quien asume la responsabilidad de construir la página a través de los datos solicitados al servidor. Esto dificulta la interpretación y la representación gráfica de los contenidos. 

Es importante mencionar que Google es capaz de ejecutar JavaScript, pero los sitios que se renderizan de lado de cliente deben esperar en cola hasta que los bots tengan recursos para hacer su interpretación de manera correcta. Un sitio construido en React o Angular puede tardar hasta 3 rastreos por página para poder ser interpretada de la manera correcta y de esa manera, ser indexado en las SERPs.

El secreto del SEO JavaScript está en como se realiza el renderizado: Si es de lado de cliente (CSR) o si es del lado del servidor (SSR).

¿Qué renderizado es mejor, SSR o CSR? ¿por qué?

La elección entre renderizado en el lado del servidor (SSR) y renderizado en el lado del cliente (CSR) depende de las necesidades específicas del sitio web.

SSR es generalmente mejor para SEO, ya que facilita a los motores de búsqueda indexar el contenido. Esto es crucial para sitios que dependen del tráfico orgánico.

Por otro lado, CSR puede proporcionar una experiencia de usuario más rápida y dinámica, siendo preferible para aplicaciones web ricas en interacciones. Sin embargo, el CSR puede presentar desafíos para la indexación por parte de los motores de búsqueda.

La elección entre ambos métodos debe equilibrar la optimización del SEO y la experiencia del usuario.

Render híbrido, un salvavidas para el SEO Javascript

El Prerendering es llamado también renderizado estático y nació como una solución de renderización a las aplicaciones hechas con Frameworks JavaScript.

En esta estrategia, la renderización ocurre cuando la página esta en tiempo de construcción. Una vez se realiza la petición al servidor este construye un archivo HTML separado para cada URL del sitio.

Esta estrategia ofrece un FP (first Paint – Primera Pintura) y FCP (first contentful paint – Primera pintura con contenido) similar al SSR tradicional, generando una velocidad de carga rápida y convirtiéndolo en el método favorito de los SEO que trabajan con JavaScript.