Definición Web Rendering: SSR, CSR, SSG, ISR Explicados
Rendering es cómo se produce el HTML de una página web. Estrategias: SSR, CSR, SSG, ISR, Edge — cada una con distintos tradeoffs.
¿Qué es rendering?
En desarrollo web, "rendering" significa producir el HTML final que el navegador muestra. El mismo componente React o Vue puede ser renderizado en el servidor (SSR), en el navegador (CSR), en build time (SSG), o combinaciones híbridas.
Frameworks modernos (Next.js, Nuxt, SvelteKit, Astro, Remix) te permiten mezclar estrategias rendering por ruta o incluso por componente.
Las cinco estrategias rendering principales
| Estrategia | HTML producido cuándo? | ¿Dónde? | Mejor para |
|---|---|---|---|
| Static Site Generation (SSG) | Build time | Build server | Marketing, blogs, docs |
| Server-Side Rendering (SSR) | Por request | Servidor | Páginas personalizadas |
| Client-Side Rendering (CSR) | En navegador | Device usuario | Dashboards SaaS |
| Incremental Static Regeneration (ISR) | Build + re-build on-demand | Build server | E-commerce |
| Edge Rendering | Por request en CDN edge | Edge Cloudflare/Vercel | Contenido geo-personalizado |
Static Site Generation (SSG)
HTML se genera una vez en build time y se sirve como archivos estáticos desde CDN.
Pros: Delivery más rápida posible, hosting más barato.
Cons: Re-build necesario para content updates.
Herramientas: Astro, Hugo, Jekyll, Gatsby, Next.js, 11ty.
Server-Side Rendering (SSR)
HTML se genera en el servidor para cada request.
Pros: Contenido siempre fresco; SEO-friendly.
Cons: TTFB más lento que SSG; necesita servidor running; caro a escala.
Herramientas: Next.js, Nuxt, Remix, SvelteKit, Astro.
Client-Side Rendering (CSR)
El servidor devuelve HTML mínimo; JavaScript renderiza la página en el navegador.
Pros: Altamente interactivo; barato de servir.
Cons: First paint lento; malo para SEO; payload JS alto.
Herramientas: Plain React/Vue/Angular SPA.
Incremental Static Regeneration (ISR)
Combina SSG y SSR.
Herramientas: Next.js, Astro, Vercel.
Edge Rendering
SSR pasa en nodos CDN edge.
Herramientas: Cloudflare Workers, Vercel Edge, Netlify Edge, Deno Deploy.
Hydration: donde CSR encuentra SSR/SSG
SSR y SSG producen HTML, pero componentes interactivos necesitan JavaScript. Hydration es el proceso donde el JS client-side se "adhiere" al HTML server-rendered.
- Partial hydration (Astro Islands)
- Streaming SSR (React 18)
- Progressive hydration
- Resumability (Qwik)
- HTMX / server components
Comparación: tradeoffs estrategia rendering
| Métrica | SSG | SSR | CSR | ISR |
|---|---|---|---|---|
| TTFB | Más rápido | Lento | Rápido | Rápido |
| FCP | Rápido | Medio | Lento | Rápido |
| SEO | Excelente | Excelente | Necesita hydration | Excelente |
| Personalización | No | Sí | Sí | Limitada |
| Costo hosting | Más barato | Caro | Barato | Barato |
Eligiendo estrategia rendering
- Sitio marketing, blog, docs → SSG.
- Catálogo e-commerce → ISR.
- Dashboard SaaS (logged-in) → CSR o SSR.
- Sitio noticias → SSR o ISR.
- Landing pages geo-localizadas → Edge rendering.
Rendering y Core Web Vitals
- LCP — mejor con SSG/SSR.
- INP — hydration pesada hunde INP.
- CLS — páginas server-rendered son más estables.
FAQ: web rendering
¿SSR o SSG: cuál es mejor?
SSG si contenido no cambia frecuentemente. SSR si contenido es altamente dinámico.
¿Está muerto CSR?
No — aún ideal para dashboards apps logged-in.
¿Cuál es la diferencia entre SSR y SSG?
Timing. SSR genera HTML por request; SSG en build time.
¿Qué es React Server Components?
Una feature React donde algunos componentes corren solo en servidor.
¿Cómo afecta rendering al SEO?
Crawlers prefieren HTML pre-rendered. SSG/SSR son ideales.
Testea performance rendering con LoadFocus
LoadFocus corre auditorías Lighthouse desde 25+ regiones y load-testea páginas dinámicas con k6/JMeter. Regístrate en loadfocus.com/signup.
Herramientas LoadFocus relacionadas
Lleva este concepto a la práctica con LoadFocus — la misma plataforma que potencia todo lo que acabas de leer.