¿Cuáles son las formas de implementar el enrutamiento en el desarrollo frontend?

Existen dos formas principales de implementar el enrutamiento en el frontend:

1. Enrutamiento del lado del cliente: El enrutamiento se maneja directamente en el navegador mediante JavaScript.

   • Principio de funcionamiento: Al navegar, la página no se recarga completamente. JavaScript cambia la URL en la barra de direcciones del navegador (usando la API de History) y carga o redibuja dinámicamente los componentes o partes necesarias de la página.
   • Estado de la URL:
     • Usa la API de History (pushState, replaceState). La URL es limpia, sin #.
     • Puede usar hash (#) en la URL (enfoque obsoleto con #).
   • Ventajas:
     • Mejor experiencia de usuario (transiciones más rápidas, sin recarga completa).
     • Adecuado para aplicaciones de una sola página (SPA).
   • Desventajas:
     • Requiere configuración adicional del servidor para manejar correctamente las accesos directos por URL (por ejemplo, configurar fallback a index.html).
     • Puede haber problemas con SEO si el contenido solo se renderiza en el cliente (se resuelve con SSR o prerendering).
   • Bibliotecas/frameworks populares: React Router, Vue Router, Angular Router.

2. Enrutamiento del lado del servidor: El enrutamiento se maneja completamente en el servidor.

   • Principio de funcionamiento: En cada solicitud a una nueva URL, el navegador envía una petición al servidor. El servidor procesa la solicitud, determina qué contenido devolver y envía una página HTML completa al cliente. El navegador recarga completamente la página.
   • Estado de la URL: La URL corresponde al recurso real en el servidor.
   • Ventajas:
     • Implementación sencilla para aplicaciones multipágina (MPA).
     • Excelente indexación por motores de búsqueda (SEO), ya que el contenido está listo de inmediato.
     • No requiere JavaScript para la navegación básica.
   • Desventajas:
     • Transiciones entre páginas más lentas debido a la recarga completa.
     • Menos experiencia interactiva en comparación con SPA.
   • Ejemplos: Hereda de aplicaciones web tradicionales, donde cada URL corresponde a un archivo o ruta en el servidor (por ejemplo, PHP, Python con frameworks como Django/Flask, Node.js con Express, etc.).

En las aplicaciones modernas de frontend, especialmente en SPA, el enrutamiento del lado del cliente es el estándar. El enrutamiento del lado del servidor se usa más para sitios multipágina o en combinación con el enrutamiento del cliente para mejorar el SEO (por ejemplo, SSR).