Integrar Svelte en Astro te permite combinar tres frameworks en un mismo proyecto sin perder rendimiento ni claridad en el código. Aquí aprendes a instalar las dependencias, configurar el entorno y crear un componente que conviva con React y Vue en una misma vista, ideal si buscas flexibilidad en arquitecturas modernas.

¿Qué necesitas instalar para usar Svelte en Astro?

Antes de escribir código, apaga tu entorno de desarrollo local. Esto evita conflictos cuando agregas nuevas dependencias al proyecto.

Desde la terminal necesitas dos paquetes específicos para que Astro reconozca y compile componentes de Svelte:

• npm install @astrojs/svelte@2.0.1, que es el adaptador oficial de Astro para Svelte [0:30].
• npm install svelte@3.55.1, el framework como tal [0:45].

¿Por qué instalar dos paquetes y no solo uno? Porque uno es el adaptador que conecta Astro con Svelte, y el otro es el framework que compila los componentes. Son piezas distintas que trabajan juntas.

Una vez instalados, toca registrar la integración en astro.config. Importas Svelte desde @astrojs/svelte y lo agregas al arreglo de integraciones, igual que hiciste con React y Vue. Con eso, Astro ya sabe cómo procesar archivos .svelte.

¿Cómo se crea un componente en Svelte dentro del proyecto?

Crea un archivo nuevo llamado Social.svelte. Visual Studio Code te sugerirá habilitar el plugin de Svelte para resaltar sintaxis y darte mejor soporte visual; acéptalo, te ahorra tiempo [1:35].

La estructura de un archivo Svelte se siente natural si vienes de HTML. Por defecto escribes marcado directamente, y si necesitas lógica agregas una etiqueta <script>; si necesitas estilos, una etiqueta <style>. Es muy parecido a cómo funciona Astro y se diferencia de Vue o React, donde el HTML y el JavaScript conviven de forma más entrelazada dentro del mismo bloque.

Para este componente, en lugar de buscar un recurso nuevo en HyperUI, reutiliza el bloque de redes sociales que ya estaba dentro del componente Vue. Cortas la lista no ordenada (<ul>) con los íconos SVG y la pegas dentro del archivo Social.svelte [2:25]. Así reciclas trabajo previo y mantienes consistencia visual.

¿Dónde se inserta el componente Svelte en la vista?

Ve a tu página con la ruta dinámica y coloca <Social /> justo encima del footer. Recuerda importarlo arriba y cerrar la etiqueta correctamente.

Con ese cambio, la vista queda con tres frameworks colaborando:

• Header construido en React.
• Componente Social construido en Svelte.
• Footer construido en Vue.

¿Puede Astro renderizar React, Vue y Svelte en la misma página? Sí. Astro permite mezclar frameworks porque cada componente se compila de forma independiente y solo se hidrata cuando lo indicas.

¿Cómo verificar que la integración funciona?

Levanta el entorno con npm run dev y abre el navegador. Al recargar la aplicación deberías ver las redes sociales renderizadas justo arriba del footer [3:30].

Es probable que necesites ajustes de padding, márgenes y estructura general. Eso es parte del flujo: integrar primero, pulir después. Aprovecha para experimentar con la maquetación, mover bloques o cambiar tamaños hasta que la vista se sienta equilibrada.

El reto queda abierto: personaliza el diseño, toma un screenshot del resultado final y compártelo en la caja de comentarios. Es la mejor forma de fijar lo aprendido y ver cómo otros estudiantes resolvieron el mismo problema.

En la siguiente clase entra en escena un patrón de diseño clave para entender por qué Astro puede hacer esto sin penalizar el rendimiento: Astro Islands.