Enrutamiento basado en hash frente a basado en rutas
Compare el enrutamiento mediante hash con el enrutamiento histórico basado en pushState
Enrutamiento basado en hash frente a basado en rutas es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Dos estrategias para las URL de las SPA
Las SPA necesitan URL que el navegador no solicite al servidor. Hay dos enfoques: el basado en hash usa el fragmento (todo lo que aparece después de #), que el navegador nunca envía al servidor; el basado en rutas usa el pathname junto con ciertos trucos de History API.
Enrutamiento basado en hash
Las URL tienen el formato https://example.com/#/about. El servidor solo ve / y sirve el mismo HTML para todas las URL. El JS del cliente lee location.hash para decidir qué vista renderizar. Es sencillo y no requiere configuración del servidor.
El evento hashchange
Los enrutadores basados en hash escuchan el evento hashchange, que se dispara cada vez que cambia location.hash. Combinado con la lectura de window.location.hash, es toda la API necesaria para el enrutamiento del lado del cliente; no interviene la History API.
window.addEventListener("hashchange", () => {
const route = location.hash.slice(1) || "/";
renderPage(route);
});Enrutamiento basado en rutas
Las URL tienen el formato https://example.com/about, indistinguible de las URL generadas por el servidor. pushState, de la History API, cambia la ruta sin recargar la página; popstate se dispara al navegar hacia atrás o hacia delante; la interceptación de clics convierte <a> en navegación de SPA.
Se requiere configuración del servidor
Para el enrutamiento basado en rutas, el servidor debe devolver el index.html de la SPA para cualquier ruta que el usuario pueda introducir directamente (o actualizar). De lo contrario, al actualizar /about se obtiene un error 404. Configure el servidor para que intente servir el archivo y recurra a index.html si no lo encuentra (history fallback en Nginx, vite-plugin-history-api en Vite dev).
# Nginx config
location / {
try_files $uri $uri/ /index.html;
}SEO y uso compartido
Los motores de búsqueda y muchas herramientas no pueden rastrear los fragmentos hash; el contenido de /#/about es invisible para los rastreadores antiguos (Google lo gestiona mediante renderizado sin interfaz, pero puede que otros no). Las URL basadas en rutas se rastrean con normalidad, por lo que son claramente mejores para el SEO.
Percepción del usuario
Las URL con hash parecen visiblemente «extrañas»: los usuarios notan el # y quizá no confíen en el enlace o no recuerden copiar la URL completa. Las URL basadas en rutas tienen el mismo aspecto que cualquier otra URL web, justo lo que esperan los usuarios. Por esta sola razón, las SPA modernas casi siempre eligen el enrutamiento basado en rutas.
Complejidad de implementación
Basado en hash: ~10 líneas de JS (listener de hashchange + render). Basado en rutas: llamadas a pushState, listener de popstate, interceptación de clics en enlaces y fallback del lado del servidor. El hash es la opción más sencilla posible; las rutas requieren más infraestructura para ofrecer una mejor experiencia de usuario.
Consideraciones sobre el alojamiento estático
Los alojamientos puramente estáticos (la configuración predeterminada de GitHub Pages) no pueden realizar un fallback del lado del servidor, por lo que el enrutamiento basado en rutas se rompe al actualizar la página. Alternativas: usar trucos de redirección en 404.html, alojar la aplicación en Netlify/Vercel (que entienden el fallback de SPA) o aceptar el enrutamiento basado en hash en proyectos destinados exclusivamente a alojamientos estáticos.
Enfoques híbridos
Algunas aplicaciones combinan ambos enfoques: usan rutas para la ruta principal y hash para secciones dentro de la página (modales, anclas de pestañas). El evento hashchange sigue disparándose para estas secciones y complementa el enrutador basado en History para gestionar el estado de las subpáginas sin llenar la URL principal.
Migración entre ambos enfoques
Para migrar de hash a rutas: reescriba todos los enlaces internos, añada un fallback del servidor, sustituya la lógica de hashchange por popstate y redirija las URL antiguas con hash a sus equivalentes basadas en rutas mediante un pequeño script de arranque que se ejecute una vez y llame a history.replaceState.
Criterios de decisión
Elija el enfoque basado en hash para: alojamientos estáticos sin reescrituras, herramientas administrativas internas en las que el SEO no sea importante y widgets integrados. Elija el enfoque basado en rutas para: cualquier aplicación orientada al usuario, cualquier aplicación que deba indexarse mediante SEO y cualquier aplicación que se comparta en redes sociales; es decir, la mayoría de las aplicaciones.
Comprobación de conocimientos
¿Por qué el enrutamiento de SPA basado en rutas requiere una configuración del servidor que el enrutamiento basado en hash no necesita?
Resumen
El enrutamiento basado en hash (URL como /#/about) no necesita configuración del servidor, pero tiene un SEO deficiente y utiliza URL poco atractivas. El enrutamiento basado en rutas (URL como /about) necesita un fallback del servidor a index.html, pero produce URL limpias, fáciles de indexar y de compartir. Las SPA modernas orientadas al público usan rutas; los proyectos estáticos o internos todavía pueden elegir el hash por sencillez.
Preguntas frecuentes
¿La lección «Enrutamiento basado en hash frente a basado en rutas» es gratis?
Sí — el texto completo de «Enrutamiento basado en hash frente a basado en rutas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Enrutamiento basado en hash frente a basado en rutas»?
Compare el enrutamiento mediante hash con el enrutamiento histórico basado en pushState Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Enrutamiento basado en hash frente a basado en rutas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- pushState y replaceState
- El evento popstate
- Enrutamiento basado en hash frente a basado en rutas
- La Navigation API en navegadores modernos