astro

Publicado
Autor Bajo Velo
Etiquetas

Astro + Vue: islas en la práctica

Cómo combino Astro para render estático con islas Vue 3 solo donde la interactividad lo pide.

Astro renderiza HTML estático por defecto. Vue entra solo cuando hace falta interactividad real, y se activa con directivas como client:load o client:visible.

Regla simple

  • Por defecto: componentes .astro.
  • Excepción: componentes .vue con client:* cuando el usuario debe interactuar.

Resultado: menos JS enviado al cliente, mejor LCP, mejor SEO.

Ejemplo mínimo

---
import Menu from '../components/vue/Menu.vue';
---
<Menu client:load links={[{ href: '/', label: 'Inicio' }]} />

Lo importante: la isla se hidrata en su propio bundle aislado, sin inflar el resto de la página.

Sigue leyendo

Artículos relacionados