El problema

Recientemente experimenté con HUGO y realmente me sorprendió lo mucho que me gusta lo simple y rápido que es en comparación con Gatsby y NextJS , los creadores de sitios web estáticos con los que he tratado antes.

El inconveniente más importante desde mi perspectiva es que Gatsby produce

• sitios web estáticos tradicionales, donde cada navegación interna del sitio vuelve a solicitar todas las dependencias comunes y pierde todo el estado, mientras que los otros dos hacen
• SPA, donde la navegación interna del sitio no provoca el reprocesamiento de Javascript común.

Si bien las ventajas de los SPA son muchas, solo me estoy enfocando en los puntos relacionados con la navegación en la página:

• Es mas rapido. Es importante que la navegación del sitio sea rápida para evitar exponer al usuario una nueva representación de los elementos comunes de la página (lo que se experimenta como un parpadeo molesto de los menús o incluso del fondo de la página). Las páginas de sitios web estáticos se pueden servir en aproximadamente 50 ms, pero los navegadores generalmente no pueden hacer el resto lo suficientemente rápido si necesitan evaluar los scripts nuevamente. Por ejemplo, los documentos de arranque , creados con HUGO y con bastante capacidad de respuesta, todavía no son lo suficientemente rápidos: a menudo parpadean en la navegación, aunque el contenido principal se carga en menos de 100 ms.
• El estado puede persistir. Eso es importante porque muchas etiquetas Javascript utilizadas en sitios web tradicionales que no son SPA pueden hacer uso de eso: por ejemplo, una ventana de chat ingresa a la pantalla en una animación, pero solo la primera vez ; luego permanece donde está en la navegación interna.

Estoy preguntando aquí cómo podría, mientras sigo usando HUGO rápido y simple, al menos obtener estas dos ventajas.

¿Una posible solución?

Podría pensar en un enfoque un tanto extraño pero muy general que sería escribir una pieza genérica de Javascript que, al igual que los SPA,

• intercepta la navegación del navegador,
• modifica todas las etiquetas para interceptar clics a
• carga nuevas páginas con AJAX en esos clics en lugar de permitir el manejo del navegador,
• cambiar el contenido y arreglar el historial.

En mi caso, estaría perfectamente feliz de tener la restricción de tener el mismo elemento head y un diseño externo inmutable (los menús deben estar dentro de eso y aún así cargarse cada vez) excepto por algunos elementos seleccionados, como el título de la página.

Entonces, mis preguntas aquí son

• hay una manera mas facil?
• ¿Hay algún problema con este enfoque que no veo?
• ¿Tengo que escribir esto yo mismo o ya hay algo sobre lo que podría construir?