Saltar al contenido principal

🎭 CSR vs SSR vs SSG

📖 Definición​

Las formas de crear y mostrar páginas web se pueden dividir principalmente en tres:

  • CSR (Client-Side Rendering): Creación de páginas con JavaScript en el navegador
  • SSR (Server-Side Rendering): Envío de HTML completamente generado desde el servidor
  • SSG (Static Site Generation): Generación de HTML previamente en el momento de la compilación

Cada método tiene sus ventajas y desventajas, y debe elegirse según las características del proyecto.

🎯 Entendiendo por analogía​

Analogía de un restaurante​

Comparando los tres métodos de renderizado con un restaurante:

CSR (Client-Side Rendering)
= Restaurante de autoservicio 🍳

Cliente (navegador):
1. Entra al restaurante (recibe HTML vacío)
2. Recibe ingredientes (descarga JavaScript)
3. Cocina por sí mismo (renderizado)
4. Come la comida terminada

Ventajas: Poca carga para la cocina (servidor), libertad para cocinar
Desventajas: Tiempo de preparación necesario, difícil para principiantes

---

SSR (Server-Side Rendering)
= Restaurante tradicional 🍽️

Cocina (servidor):
1. Tomar pedido (solicitud)
2. Cocinar (generar HTML)
3. Servir comida terminada (enviar HTML)

Cliente (navegador):
¡Puede comer inmediatamente!

Ventajas: Carga inicial rápida, amigable con motores de búsqueda
Desventajas: Gran carga para la cocina, necesidad de cocinar cada vez

---

SSG (Static Site Generation)
= Cadena de comida preparada 🍱

Tiempo de compilación:
1. Preparar todos los almuerzos por adelantado
2. Guardar en refrigerador (CDN)

Cliente (navegador):
1. Hace un pedido
2. Recibe inmediatamente un almuerzo empaquetado
3. Come

Ventajas: Entrega ultrarrápida, bajo costo
Desventajas: Difícil cambiar menú, limitaciones de frescura

Analogía de construcción​

CSR = Muebles de montaje (IKEA) 🪑
- Envío de piezas e instrucciones
- Montaje propio en casa
- Envío económico
- Tiempo de montaje necesario

SSR = Muebles a medida 🛋️
- Fabricación por encargo
- Envío de producto terminado
- Listo para usar
- Alto costo, tiempo consumido

SSG = Muebles prefabricados 🪟
- Fabricados con anticipación
- Almacenados
- Envío inmediato
- Económico y rápido
- Sin personalización

(The rest of the content is the same as in the previous translation, with all code blocks preserved exactly the same and only text translated to Spanish)

...