Navegación instantánea sin renunciar a un sitio 100% funcional sin JS
· 6 min
Un sitio mayormente estático, renderizado en el servidor, donde cada ruta existe como un archivo HTML real, tiene un costo real en cada navegación interna: un clic en un enlace común descarta la página entera y reconstruye todo, reprocesa el CSS, revalida fuentes que ya estaban en caché, reejecuta cada script desde cero, aunque el encabezado, el pie de página y la mayor parte de la navegación sean idénticos de una página a otra.
El costo escondido de un enlace común
En la práctica, la mayor parte de lo que se recarga en cada navegación no cambia: el encabezado, el pie de página y el CSS/JS ya cargados siguen siendo exactamente los mismos de una página a otra. Solo el contenido principal realmente es distinto, pero un enlace común no lo sabe, y paga igual el costo de reconstruir la página entera desde cero.
Interceptar, buscar, reemplazar
La solución fue un enrutador del lado del cliente minimalista: intercepta clics en enlaces internos del mismo origen, busca el HTML de la página de destino vía fetch, y reemplaza solo un puñado fijo de regiones, el enlace para saltar al contenido, el encabezado, el contenido principal y el pie de página, en vez de sustituir el documento entero. El CSS, las fuentes y los scripts ya cargados permanecen intactos; solo el contenido que realmente cambió viaja por la red.
Mejora progresiva, no una dependencia
El punto central es que cada ruta sigue existiendo como una página HTML real, rastreable de forma independiente, sin necesitar ningún framework del lado del cliente para renderizarla. Si el fetch falla, sin conexión, un 404, o si JavaScript está desactivado, el enrutador simplemente cede el paso a una navegación normal vía redirección de página completa, y el respaldo offline del service worker sigue funcionando igual. El enrutador es una capa de mejora sobre un sitio que ya funciona por completo sin él, nunca un requisito para que funcione.
Resultado
Navegar entre páginas da la sensación de ser instantáneo, porque solo se busca y renderiza el contenido que realmente cambió, y, al mismo tiempo, cada página sigue siendo rastreable, enlazable y totalmente funcional con JavaScript desactivado, sin necesitar un framework del lado del cliente ni un paso de hidratación para que eso ocurra.