Hablando de SEO…🔍
Tipos de renderizado JavaScript y su impacto en SEO
Jorge J. Rolo
La forma en que tu sitio se renderiza impacta directamente en SEO, velocidad percibida y coste de infraestructura.
En SEO técnico, entender el renderizado —el proceso de convertir HTML, CSS y JS en una página visible— es clave para tomar buenas decisiones.
En esta guía cubrimos los 4 enfoques más comunes: CSR, SSR, SSG e ISR, con funcionamiento, casos de uso y riesgos SEO.
Client-Side Rendering (CSR) NAVEGADOR
Cómo funciona
- Se entrega HTML básico.
- El navegador descarga el bundle de JS.
- El JS solicita datos (API) y monta el contenido.
Ventajas
- Interacciones fluidas tras la primera carga.
- Menor carga en el servidor.
Desventajas
- Contenido no visible hasta ejecutar JS (riesgo SEO).
- Mayor tiempo hasta el primer contenido útil.
- Si falla el JS, contenido incompleto o en blanco.
Cuándo usarlo
Apps internas, dashboards y áreas privadas donde el SEO no es prioritario.
// Página CSR básica en React/Next.js (SPA)
export default function Home() {
return Bienvenido a mi SPA
;
}
El “h1” no viene en el HTML inicial: lo genera el navegador tras ejecutar React.
Server-Side Rendering (SSR) SERVIDOR
Cómo funciona
- El cliente solicita la URL.
- El servidor genera el HTML al vuelo.
- El navegador lo muestra y se hidrata con JS.
Ventajas
- Contenido útil desde el primer render.
- SEO sólido: HTML con contenido listo.
- Ideal para datos que cambian con frecuencia.
Desventajas
- Más carga y coste en servidor.
- Tiempo de respuesta mayor en vistas complejas.
- Mayor complejidad técnica.
Cuándo usarlo
Noticias, ecommerce, listados con stock/precios al minuto y páginas donde la frescura es crítica.
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return { props: { posts } };
}
En Next.js, se genera HTML por petición antes de enviarlo al cliente.
Static Site Generation (SSG) ESTÁTICO
Cómo funciona
- Durante el deploy se produce el HTML de cada ruta.
- Se entrega el mismo HTML hasta el siguiente build.
Ventajas
- Velocidad muy alta y coste bajo.
- Contenido en HTML inicial (SEO).
- Escala de forma excelente vía CDN.
Desventajas
- El contenido no cambia hasta el próximo build.
- Builds lentos en sitios muy grandes.
Cuándo usarlo
Blogs, documentación, landings y webs corporativas con cambios poco frecuentes.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return { props: { posts } };
}
El HTML se genera en build y se sirve idéntico a todos.
Incremental Static Regeneration (ISR) HÍBRIDO
Cómo funciona
- Se genera como SSG en el build.
- Se define un tiempo de revalidación.
- Tras ese tiempo, la siguiente visita dispara una regeneración en background.
Ventajas
- Rapidez de SSG con contenido más actualizado.
- Coste inferior a SSR continuo.
- Escalable en sitios amplios.
Desventajas
- Puede mostrarse contenido anterior justo antes de la revalidación.
- No todas las plataformas lo soportan.
Cuándo usarlo
Blogs con alto tráfico, catálogos y ecommerce donde la actualización admite minutos u horas.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts },
revalidate: 60 // revalidación cada 60s
};
}
Comparativa rápida para SEOs
| Estrategia | SEO | Velocidad inicial | Contenido fresco | Escalabilidad |
|---|---|---|---|---|
| CSR | Bajo (depende de JS) | Lenta | Sí | Alta |
| SSR | Alto | Media | Sí | Media |
| SSG | Alto | Muy rápida | No (build) | Muy alta |
| ISR | Alto | Muy rápida | Sí (programado) | Muy alta |
Claves para elegir como SEO
Frecuencia de cambio del contenido
Minutos: SSR. Horas/días: SSG/ISR.
Prioridad SEO
Evita CSR puro en páginas a posicionar.
Escalabilidad y coste
SSR masivo puede encarecer infraestructura.
Estrategia mixta
Combina: SSG/ISR para contenidos, SSR para datos críticos, CSR en áreas privadas.
Conclusión
Comprender cómo se renderiza tu sitio es esencial para alinear SEO, experiencia de usuario y costes. No existe una única estrategia ganadora: selecciona el enfoque adecuado por sección y caso de uso.