Frameworks front-end

Construye tu sitio web de Astro sin sacrificar tu framework de componentes favorito. Crea islas de Astro con los frameworks de UI de tu elección.

Integraciones oficiales de frameworks front-end

Astro es compatible con una variedad de frameworks populares, incluyendo React, Preact, Svelte, Vue, SolidJS y AlpineJS mediante integraciones oficiales.

Encuentra aún más integraciones de frameworks mantenidas por la comunidad (p. ej., Angular, Qwik, Elm) en nuestro directorio de integraciones.

Frameworks UI

Instalación de integraciones

Una o varias de estas integraciones de Astro se pueden instalar y configurar en tu proyecto.

Consulta la Guía de Integraciones para obtener más detalles sobre cómo instalar y configurar las integraciones de Astro.

Uso de componentes de frameworks

¡Usa los componentes de tu framework de JavaScript en tus páginas, layouts y componentes de Astro igual que los componentes de Astro! Todos tus componentes pueden convivir en /src/components, o pueden organizarse de la manera que prefieras.

Para usar un componente de un framework, impórtalo desde su ruta relativa en el script de tu componente de Astro. Luego, usa el componente junto con otros componentes, elementos HTML y expresiones de tipo JSX en la plantilla del componente.

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>¡Usa componentes de React directamente en Astro!</h1>
    <MyReactComponent />
  </body>
</html>

Por defecto, los componentes de tu framework solo se renderizarán en el servidor, como HTML estático. Esto es útil para los componentes de plantilla que no son interactivos y evita enviar JavaScript innecesario al cliente.

Hidratación de componentes interactivos

Un componente de un framework puede hacerse interactivo (hidratarse) mediante una directiva client:*. Estos son atributos del componente que determinan cuándo se debe enviar el JavaScript de tu componente al navegador.

Con todas las directivas del cliente, excepto client:only, tu componente primero se renderizará en el servidor para generar HTML estático. El JavaScript del componente se enviará al navegador de acuerdo con la directiva que elijas. Luego, el componente se hidratará y se volverá interactivo.

---
// Ejemplo: hidratación de componentes de frameworks en el navegador.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from '../components/InteractiveModal.svelte';
---
<!-- El JS de este componente comenzará a importarse cuando la página cargue -->
<InteractiveButton client:load />

<!-- El JS de este componente no se enviará al cliente hasta que
el usuario haga scroll hacia abajo y el componente sea visible en la página -->
<InteractiveCounter client:visible />

<!-- Este componente no se renderizará en el servidor, pero se renderizará en el cliente cuando la página cargue -->
<InteractiveModal client:only="svelte" />

El framework de JavaScript (React, Svelte, etc.) necesario para renderizar el componente se enviará al navegador junto con el propio JavaScript del componente. Si dos o más componentes en una página utilizan el mismo framework, el framework solo se enviará una vez.

Directivas de hidratación disponibles

Hay varias directivas de hidratación disponibles para los componentes de frameworks de UI: client:load, client:idle, client:visible, client:media={QUERY} y client:only={FRAMEWORK}.

Consulta nuestra página de referencia de directivas para obtener una descripción completa de estas directivas de hidratación y su uso.

Mezclar frameworks

Puedes importar y renderizar componentes de múltiples frameworks en el mismo componente de Astro.

---
// Ejemplo: Mezclar componentes de múltiples frameworks en la misma página.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

Astro reconocerá y renderizará tu componente basándose en su extensión de archivo. Para distinguir entre frameworks que usan la misma extensión de archivo, se requiere configuración adicional al renderizar múltiples frameworks JSX (p. ej. React y Preact).

Pasar props a componentes de frameworks

Puedes pasar props desde componentes de Astro a componentes de frameworks:

---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["aprender Astro", "revisar PRs"]} />
  <Counter startingCount={1} />
</div>

Las props que se pasan a los componentes interactivos de frameworks usando una directiva client:* deben ser serializadas: traducidas a un formato adecuado para su transferencia a través de una red, o para su almacenamiento. Sin embargo, Astro no serializa todos los tipos de estructuras de datos. Por lo tanto, existen algunas limitaciones sobre lo que se puede pasar como props a los componentes hidratados.

Se admiten los siguientes tipos de props: objeto plano, number, string, Array, Map, Set, RegExp, Date, BigInt, URL, Uint8Array, Uint16Array, Uint32Array, e Infinity

Las estructuras de datos no compatibles que se pasan a los componentes, como las funciones, solo se pueden usar durante el renderizado en el servidor del componente y no se pueden utilizar para proporcionar interactividad. Por ejemplo, pasar funciones a componentes hidratados no es compatible porque Astro no puede pasar funciones desde el servidor de una manera que las haga ejecutables en el cliente.

Pasar hijos a componentes de frameworks

Dentro de un componente de Astro, puedes pasar elementos hijos a los componentes de frameworks. Cada framework tiene sus propios patrones sobre cómo hacer referencia a estos hijos: React, Preact, y Solid usan una prop especial llamada children, mientras que Svelte y Vue usan el elemento <slot />.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Aquí tienes una barra lateral con algo de texto y un botón.</p>
</MyReactSidebar>

Además, puedes usar Slots con nombre para agrupar elementos hijos específicos.

Para React, Preact y Solid, estos slots se convertirán en una prop de nivel superior. Los nombres de los slots que usen kebab-case se convertirán a camelCase.

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Aquí tienes una barra lateral con algo de texto y un botón.</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>

export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}

Para Svelte y Vue, estos slots se pueden referenciar usando un elemento <slot> con el atributo name. Los nombres de los slots que usen kebab-case se conservarán.

<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>

Anidamiento de componentes de framework

Dentro de un archivo Astro, los elementos hijos de un componente de framework también pueden ser componentes hidratados. Esto significa que puedes anidar de forma recursiva componentes de cualquiera de estos frameworks.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---
<MyReactSidebar>
  <p>Aquí tienes una barra lateral con algo de texto y un botón.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

Esto te permite crear “apps” completas en tu framework de JavaScript preferido y renderizarlas, mediante un componente padre, en una página de Astro.

¿Puedo usar componentes de Astro dentro de mis componentes de framework?

Cualquier componente de framework de UI se convierte en una “isla” de ese framework. Estos componentes deben estar escritos completamente como código válido para ese framework, usando solo sus propias importaciones y paquetes. No puedes importar componentes .astro en un componente de framework de UI (p. ej., .jsx o .svelte).

Sin embargo, puedes usar el patrón <slot /> de Astro para pasar contenido estático generado por componentes de Astro como elementos hijos a tus componentes de framework dentro de un componente .astro.

---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>

¿Puedo hidratar componentes de Astro?

Si intentas hidratar un componente de Astro con un modificador client:, obtendrás un error.

Los componentes de Astro son componentes de plantillas de solo HTML sin tiempo de ejecución en el cliente. Pero, puedes usar una etiqueta <script> en la plantilla de tu componente de Astro para enviar JavaScript al navegador que se ejecute en el ámbito global.

Aprende más sobre las etiquetas <script> del lado del cliente en componentes de Astro

Contribuir Comunidad Patrocinador