Con la gran cantidad de Frameworks, y bibliotecas Web, es normal que muchos desarrolladores no sepan cual elegir o que los diferencia, asi que en este articulo voy a explicarte dos formas en las que se categorizan algunos frameworks y bibliotecas web, y como esto te puede ayudar a entender cual es el que más te conviene para tu siguiente proyecto.

Categorías de los Frameworks

Todo Framework y biblioteca Web al final produce interfaces para sitios web, asi que desde este punto de vista, todos parecen iguales, pero la forma de diferenciarlos no esta en lo que produce sino en como lo produce, esto en los framewoks sería sus Metodos de Renderizado, y esto trata de como se procesan los archivos antes de crear páginas.

Asi que para este articulo diferenciaremos Frameworks de:

Server Side Rendering o Template Rendering (Multi Page Applications)
Client Side Rendering (Single Page Applications)

Caso de Ejemplo

Coloquemos un caso comun, supongamos que como desarrollador Freelance, alguien te esta pagando por crear una tienda virtual.

Debe tener un carrito de compra
Los usuarios deben ver su historial de compra
Y los articulos deben ser encontrados fácilmente

Empecemos con la primera opcion Server Side Rendering.

Server Side rendering

Renderizado del lado del Servidor o Server Side Rendering, significa en la práctica que cada vez que el usuario visita una URL, una aplicación de servidor le responde con una página HTML.

en el ejemplo del ecommerce, cuando un usuario pida la página de productos o la página de un producto, el servidor lo debe generar una página desde cero.

Es decir el servidor esta generando multiples páginas en cada URL visitada, es por esto que a las aplicaciónes utilizando este enfoque tambien se les llamada Multi-Page Applications o Aplicaciones de multiples páginas.

Entre algunos Frameworks que estan en esta categoría podriamos encontrar a:

[ASP.NET]
[Laravel]
[Django]
[Spring Boot]
[Ruby on Rails]

Y Para crear la interfaz de HTML, estos frameworks usan bibliotecas que se llaman motores de plantillas o Template Engines, estos hacen que en el HTML puedas usar logica extra como condicionales, bucles y funciones, pero el framework los convertira a HTML antes de enviarlos al cliente. Por ejemplo en Django se usa Jinja2, Laravel usa Blade, o Ruby usa ERB.

Aunque cualquier lenguaje de backend puede usar multiples motores de plantilla, por ejemplo:

De hecho como se hace uso de Templates, tambien podrías escuchar el termino Template Rendering relacionado a esto.

Este enfoque tiene ventajas en cuanto a:

SEO, ya que como el HTML llega generado al navegador, este puede leer el contenido y saber de que se trata, haciendo que pueda rander facil en buscadores (como Google)
Son más seguras, al estar toda la lógica en el backend, el usuario solo ve el resultado final en el frontend
Tienen Fácilidad de integrarse con Bases de datos y herramientas que requieran del sistema operativo, al ya estar en un servidor
Son fáciles de desplegar, al estar toda la aplicación esta en mismo proyecto.

Pero como desventajas tenemos:

Que la experiencia de usuario es más lenta, al generarse una página en cada cambio de URL. Cosa que tratan de resolver usando AJAX, y bibliotecas del Frontend de Javascript como Alpine.js, htmx o incluso jQuery.
Si o si Necesitas aprender un lenguaje de Servidor para poder crearlas
En aplicacioens complejas el tiempo de renderizado hace que la carga en el frontend sea más lenta. y a pesar que se pueda resolver en parte con tecnicas de caching no todo se puede resolver de este modo, al justa mente necesitar que los datos sean dinamicos, y cambien constamente.

Con estos frameworks podemos crear la tienda virtual enteramente y es bastante comodo de empezar a desarrollar, pero si en tu proyecto requiere de ir mejorando la interfaz de usuario con más interactividad y funcionalidad, el usar este enfoque es más complicado al tener en cuenta siempe que la logica se debe procesar en el servidor.

Este metodo de renderizado fue una de las primeras formas para crear aplicaciones web, y al día de hoy siguien siendo usado, principalmente en CMS basados en PHP como:

o usando los frameworks que he mencionado antes.

Y puedes crear tu proyecto desde cero y que sea MPA. Sin embargo si vas a crear una interfaz compleja, lo mejor es usar un framework de lado cliene, y dejarle al backend solo la tarea de comunicarse con la base de datos.

aqui es sonde entra el Client Side rendering.

Client Side Rendering

Desde el año 2009, con la mejora de los Motores de Javascript en el navegador el rendimiento de aplicaciones de Javascript, mejora mucho.

Apareciendo frameworks y bibliotecas de Javascript que permitian crear aplicaciones muy grandes, entre estas estaban angular.js, react.js, ember, backbone, desde alli han ido apareciendo y desapareciendo más frameworks.

Actualmente los más populares son Angular, React, Vue, Svelte.

El objetivo de estos frameworks es que tu interfaz se genere completamente en el frontend y que el backend solo enviee datos en formato JSON, de tal forma que el backend ya no tiene que esta enviando archivos HTML en cada cambio.

Esto funciona asi, cuando un usario visita la url de productos lo primero que hace el servidor es enviarle un archivo de Javascript, y este genera toda la interfaz en el navegador, luego esta interfaz hace una segunda peticion al backend con los datos. El backend responde con datos JSON y la interfaz usando Javacript actualiza la ventana sin tener que cambiar de pagina. Es decir todo el proyecto es una sola pagina html carga, el resto se actualiza con Javacsript. es por esto que las paginas creadas con este enfoque se llama Single Page Applications.

Entre las ventajas de este enfoque tenemos:

esto es más rápido porque los datos son más ligeros de enviar, y solo se solicitan peticiones si el frontend requiere datos, pero para interfaces ya no es necesario pedir paginas al servidor.
Fácil Optimizar consultas del backend al solo tener que responder datos JSON, sin nada de HTML
se pueden crear aplicaciones más complejas, al ser un proyecto entero de Frontend por separado

Como desventaja:

Es más dificil mejorar el SEO, como toda la interfaz se genera desde el frontend, cuando carga nuestra aplicacion el frontend ya no recibe páginas, lo que significa que los buscadores ya no saben que contenido es el que se muestra incialmente.
El desarrollo se divide en 2 proyectos que debes mantener, backend y frontend, y cada uno pueden tener distintos conjunto de herramientas
Probablemente si has estudiado un lenguaje como Python, PHP, Ruby, C# o Java, ahora tambien tendras que estudiar Javacript para poder crear tu interfaz en el frontend
el depliegue es más versatil pero tambien lleva un paso extra, aunque puede ser por separado o conjuntamente

para estos puedes seguir usando los Frameworks que te mencione anteriorement (Laravel, Django, Spring Boot, Expres) solo que ahora lo usarías para comunicarte con la base de datos y enviar datos JSON al cliente, de hecho este tipo de aplicaciones backend se les llama REST APIs.

Ejemplos de aplicaciones que usan este enfoque son basicamente lasredes sociales y herramienta que usas a diario como Facebook, Instagram, Tiktok, Youtube.

En nuestro ejemplo de ecommerce tendrias que crear una REST API con tu framework de backend favorito, y un aplicacion frontend con tu framework de javascript favorito.

Y claro significa que debes aprender más en comparacion, pero tambien hay desarrolladores frontend que solo han estudiado frameworks de Frontend y complementan el backend con servicios como Firebase, AWS Amplify o Supabase que permiten crear el backend y cobran mensualmente su uso. De esta forma pueden usar Client Side rendering sin necesidad de saber backend.

Conclusión

Hace muchos años atras use mucho las MPA para crear aplicaciones web, junto a bibliotecas como jQuery, actualmente este enfoque ya no es popular, debido a la mejoras constantes de los entornos de la web . Pero si vas a trabajar a un empresa es probable que te encuentres usando aun uchas MPA y frameworks que usan este enfoque, además es más facil de aprender que Client Side Rendering.

Aunque si quieres tener lo mejor de ambos mundo, esta tambien el Server Side Rendering, pero eso lo mencionaré en el siguiente video.

De momento espero que ya tengas más claro la diferencia y porque existen estos terminos en la web.

Multi Page Application (MPA) vs Single Page Application (SPA)

MPA vs SPA

Categorías de los Frameworks

Caso de Ejemplo

Server Side rendering

Client Side Rendering

Conclusión