Formaciones

    Lemoncode TV

    00:00 / 00:00

    Logo curso Aprende Astro desde cero

    Aprende Astro desde cero

    Fecha publicación: 24 jun 2025

    11. Navegación fluida

    Vale esto está muy bien, pero si pinchamos en un curso y luego en una lección, la página se recarga, ¿No sería mejor que no se recargara y que tuvieramos un experiencia más tipo SPA con transiciones suaves entre páginas?

    Para ello vamos a usar la navegación fluida de Astro, que nos permite navegar entre páginas sin recargar la página completa y además añadiendo una transición suave.

    Queremos hacerlo a nivel de sitio, así que vamos a modificar nuestro layout para que use la navegación fluida.

    ./src/layouts/Layout.astro

    ---
+ import { ClientRouter } from "astro:transitions";
// Let's import tailwind's global styles
import "../styles/global.css";
import Header from "../components/header.astro";

    <html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
+    <ClientRouter />
  </head>

    Vamos ahora a ejecutarlo y ver la diferencia:

    npm run dev

    Si te fijas la transición es más suave.

    En el próximo vídeo, vamos a ver cómo podemos integrar componentes React en nuestro proyecto de Astro.