2/6Renderizado y SEO: SSR, CSR y SSG
  1. 1Rastreo e indexación: cómo Googlebot lee tu web
  2. 2Renderizado y SEO: SSR, CSR y SSG
  3. 3Arquitectura de la información y enlazado
  4. 4Rendimiento y Core Web Vitals
  5. 5Datos estructurados y entidades
  6. 6Auditoría de logs y automatización

Renderizado y SEO: SSR, CSR y SSG

SEO técnico · Lección 2

Dónde se construye tu HTML, en el servidor o en el navegador del visitante, decide si Google lo ve a la primera o dentro de días. Aquí separamos SSR, CSR y SSG sin jerga.

  • 9 min de lectura
  • Nivel intermedio
  • Con examen al final
Lo que te llevas
  • CSR: el navegador monta la página con JavaScript. Cómodo de desplegar, arriesgado para SEO.
  • SSR: el servidor entrega el HTML ya hecho. Lo mejor para indexar, cuesta algo más de servidor.
  • SSG: el HTML se genera una vez al construir. Lo más rápido y barato cuando el contenido no cambia por usuario.
  • La hidratación vuelve interactivo ese HTML: manda solo el JavaScript necesario.
Los tres modos

Tres formas de montar la misma página

La misma página se puede servir de tres maneras, y la diferencia para Google es enorme.

CSR (renderizado en cliente): el servidor manda una cáscara casi vacía y el navegador la rellena ejecutando JavaScript. SSR (renderizado en servidor): el servidor arma el HTML completo en cada petición y lo entrega listo. SSG (generación estática): el HTML se construye una sola vez, al desplegar, y se sirve desde una CDN.

Qué recibe Google y a qué coste
SSR y SSG (HTML servido)CSR (JavaScript en cliente)
Primer HTMLEl contenido, completoUna cáscara casi vacía
IndexaciónInmediataEspera a la cola de render
Primer pintadoRápidoDepende de descargar y ejecutar el JS
CosteServidor (SSR) o build (SSG)Cero de servidor, todo al cliente

SSG es SSR llevado al extremo: el HTML se genera una vez y se sirve desde CDN. Úsalo cuando el contenido no cambia según el usuario.

Es la misma carrera de la lección anterior, y aquí es justo el centro del tema:

InteractivoLa carrera del renderizado

Dos páginas, la misma web. Lanza el rastreo y mira cuál se indexa antes.

HTML (SSR)En espera
JavaScript (CSR)En espera
El HTML se indexa en la primera pasada. El que depende de JavaScript espera en la cola de render.
Interactividad

Hidratación: HTML primero, interactividad después

Servir HTML no significa renunciar a la interactividad. La hidratación es el paso en el que el navegador engancha el JavaScript al HTML que ya recibió, y la página cobra vida. El orden importa: primero el contenido, que es lo que Google y el lector quieren ya; luego la interactividad.

El peligro es pasarse: si mandas a hidratar toda la página, ese JavaScript bloquea el hilo principal y la web tarda en responder a un clic. Manda solo lo que de verdad necesita interactividad.

De HTML a aplicación interactiva

Cuanto más JavaScript mandes a hidratar, más tarda tu web en responder y peor es tu INP (lo verás en la lección de rendimiento). Manda lo justo.

El contraste
Lo que se dice
Con Next.js o Nuxt ya tienes el SEO resuelto.
Lo comprobable
El framework te da SSR, pero si marcas toda la aplicación como de cliente vuelves al CSR sin querer. La herramienta ayuda; la decisión de qué se renderiza dónde sigue siendo tuya.

Regla m8d Comprueba tu página con el JavaScript desactivado. Si el contenido sigue ahí, lo sirves bien; si desaparece, estás en CSR aunque uses un framework moderno.

Cuándo usar cada uno
SSG para lo que no cambia por usuario: blog, guías, documentación. SSR cuando el contenido depende de la petición: resultados, sesión, datos en vivo. CSR para zonas privadas tras un login, que no necesitan indexarse.
Examen

Comprueba lo aprendido

Cinco preguntas. Acierta las cinco para dar la lección por superada.

Pregunta 1 de 5

¿Qué recibe Google en una web con renderizado en cliente (CSR)?

Comentarios

Sé el primero

Sin registro: solo un nombre. Todos los comentarios se revisan antes de publicarse.