Los conceptos esenciales del desarrollo web moderno (CSR, SSR, SSG, SPA y más)

Hoy el frontend tiene más siglas que un manual de avioneta.

Y aunque al principio parece un quilombo, la verdad es que cada concepto existe para resolver un problema muy concreto.

Si entendés estas bases, podés decidir qué usar en cada proyecto sin repetir fórmulas ni caer en modas.

Vamos a explicarlos de forma clara y con la profundidad justa, como si se lo contara a un amigo que quiere volverse realmente bueno en esto.

Single Page Application (SPA)

Una SPA es una aplicación donde todo se carga una sola vez.

El HTML llega prácticamente vacío, baja tu bundle de JavaScript y desde ese momento la UI se actualiza sin recargar la página. Navegás entre “pantallas” pero nunca pedís otra página al servidor.

Cómo funciona en la práctica:

• React monta tu App en un <div id="root">.
• El ruteo lo maneja el navegador, no el servidor.
• Cuando apretás un botón o cambiás de URL, React re-renderiza solo lo necesario.

Cuándo usarlo:

• Dashboards
• Paneles de administración
• Aplicaciones con mucha interacción
• Herramientas internas

Problemas:

• El SEO sufre (Google puede indexar, pero no siempre es perfecto).
• El tiempo de carga inicial puede ser alto si el JavaScript es grande.

Multi Page Application (MPA)

El modelo clásico de la web: cada URL corresponde a un archivo HTML distinto.
Cuando navegás, el navegador pide una página nueva al servidor.

Características:

• No dependés del JavaScript para renderizar.
• Ideal para sitios simples donde el contenido cambia poco.

Pros:

• SEO excelente
• Simplicidad total
• Carga inicial muy rápida

Contras:

• Navegación más lenta
• Experiencia menos “app”

Client-Side Rendering (CSR)

Es lo que usan muchas SPAs.

Todo el render se hace del lado del cliente.

Flujo:

1. El servidor te envía un HTML vacío.
2. Se descarga el bundle de JS.
3. Recién ahí se construye toda la interfaz.

Lo bueno:

• Muy flexible.
• Ideal para apps “vivas” donde todo cambia.

Lo malo:

• “Pantalla en blanco” hasta que carga el JS.
• Mal SEO si no agregás alternativas.

Server-Side Rendering (El famoso SSR)

El servidor genera el HTML antes de enviarlo.

Cuando llega al navegador, ya está todo renderizado.

Flujo:

1. El usuario pide una URL.
2. El servidor ejecuta el código, arma el HTML.
3. El navegador lo recibe completamente listo.

Ventajas:

• SEO perfecto.
• Time To First Byte muy rápido.
• Ideal para contenido dinámico.

Contras:

• Aumenta la carga del servidor.
• Si la página depende de muchas consultas, puede demorarse antes de renderizar.

Static Site Generation (SSG)

Generás HTML estático en build-time.

No hay “servidor” calculando nada cuando llega un usuario.

Ideal para:

• Blogs
• Documentación
• Landings
• Sitios con contenido estable

Ventajas:

• Rendimiento brutal
• Barato de hostear
• Seguro (no hay backend que romper)

Contras:

• Cada cambio requiere un rebuild del sitio.
• No sirve para contenido que cambia por minuto.

Incremental Static Regeneration (ISR)

Una de las grandes ideas de Next.js: páginas estáticas que se regeneran solas.

Cómo funciona:

• La página se genera una vez como SSG.
• Después de cierto tiempo (revalidate), la página se vuelve a generar solo cuando alguien la visita.
• Leés contenido casi en tiempo real, pero seguís con performance de sitio estático.

Perfecto para:

• Blogs con publicaciones que se actualizan
• E-commerce donde los precios cambian cada tanto
• Contenido semi dinámico

Streaming

En vez de esperar a tener toda la página lista, el servidor te envía partes de la UI apenas están disponibles.

Beneficios:

• El usuario ve contenido aunque otras partes sigan cargando.
• Mejor percepción de rendimiento.
• Permite cargar datos costosos sin bloquear todo lo demás.

React Server Components usa streaming para enviar HTML mientras el servidor procesa lo demás.

Hydration

Es lo que pasa cuando un HTML generado en el servidor se vuelve interactivo en el cliente.

Tipos:

• Full hydration: hidratar toda la app.
• Partial hydration: hidratar solo lo necesario.
• Progressive hydration: hidratar componentes a medida que aparecen.

Concepto clave para entornos híbridos como Next.js.

Edge Rendering

Renderizar la página en el borde (CDN) en vez de en un servidor central.
Esto reduce la latencia porque el contenido se procesa lo más cerca posible del usuario.

Genial para:

• Apps globales
• Contenido personalizado por región
• Sitios donde cada milisegundo importa

En resumen…

No hay un enfoque correcto para TODO.

Hay herramientas para distintos contextos:

• SPA → experiencia fluida
• MPA → simplicidad + SEO
• CSR → interacción pura
• SSR → contenido dinámico + SEO
• SSG → velocidad extrema
• ISR → híbrido ideal
• Streaming → carga progresiva
• Hydration → interacción sobre HTML ya renderizado
• Edge Rendering → velocidad global

Cuando entendés estos conceptos, podés elegir la arquitectura adecuada para cada tipo de proyecto en vez de depender del stack “de moda”.