[Astro 6] ClientRouter: Animaciones MPA tipo SPA
La gran mentira del desarrollo moderno fue creer que necesitábamos enviar megabytes de JavaScript para evitar el parpadeo blanco entre páginas. Con la llegada de la View Transitions API y su consolidación en Astro 6 mediante el componente astro client router (<ClientRouter />), esa barrera desapareció.
Implementación básica
Para activar esta funcionalidad con astro client router, solo tenés que importar el componente desde astro:transitions e incluirlo en el <head> de tu layout principal.
---
import { ClientRouter } from 'astro:transitions';
---
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Sitio con astro client router</title>
<!-- Activamos View Transitions globalmente -->
<ClientRouter />
</head>
<body>
<slot />
</body>
</html>El toque "Senior": Morphing y Persistencia
En mi experiencia migrando sitios complejos a Astro, el mayor "efecto wow" no es el fade general, sino el morphing de elementos específicos. Al usar la directiva transition:name, podés hacer que una imagen de producto "vuele" desde una grilla hasta su posición de héroe en la página de detalle.
Pero ojo, no todo es magia. Un error común que cometí al principio fue olvidar que el ClientRouter no reinicia los scripts del <head> en cada navegación. Si usás librerías de terceros que dependen de un DOMContentLoaded global, vas a tener que escuchar el evento astro:page-load.
🛠️Manejo de Scripts con ClientRouterHaz clic para expandir
Si tus scripts dejan de funcionar después del primer cambio de página, envolvé tu lógica así:
document.addEventListener("astro:page-load", () => {
// Tu inicialización aquí
miLibreria.init();
});Referencia oficial: Astro ClientRouter Docs
¿Cuándo usar ClientRouter?
Ganás
- UX premium sin costo de JS masivo
- Persistencia de estado (ej: audio player)
- Fácil de implementar
El costo
- Complejidad en la gestión de scripts
- Posibles conflictos con CSP estrictas
- Requiere cuidado con el scroll manual
Para cerrar
El futuro del desarrollo web volvió hacia el servidor, pero con interactividad reconstruida. No necesitás frameworks pesados; solo usá los estándares. Para más guías de ingeniería, visitá mi Blog o mirá cómo gestionamos datos con Live Collections.