Usar Astro, React y Svelte juntos en un mismo proyecto
Por qué y cómo combiné Astro, React y Svelte en un solo portafolio — directivas de cliente, estrategias de hidratación y los beneficios reales de mezclar frameworks.
Componentes
Primero que nada, ¿cómo es posible crear un proyecto con diferentes frameworks al mismo tiempo? La respuesta es Astro. Astro es un generador de sitios web estáticos que permite mezclar diferentes tecnologías en un solo proyecto. En este caso, me permite utilizar Svelte y React al mismo tiempo, lo que me permite aprovechar las fortalezas de cada uno.
Déjame mostrarte mi archivo Index.astro:
import Layout from '@layout/Layout.astro';
import { SkillsDashboard } from '@components/React/skills/SkillsDashboard';
import Hero from '@components/Svelte/Hero/Hero.svelte';
<Layout title="Skills">
<Hero client:load />
<SkillsDashboard client:load showMain />
<SkillsDashboard client:load />
</Layout>
¿Por qué usar Astro, Svelte y React juntos?
Dado que este proyecto está dedicado a mi portafolio, quiero demostrar a los visitantes que tengo una gran flexibilidad y conocimiento en diversas tecnologías. Además, al incorporar bibliotecas como Tailwind CSS, puedo acelerar el proceso de desarrollo y hacer que el proyecto sea más escalable.
Un aspecto particularmente interesante de Astro son las directivas de cliente que se agregan a los componentes. Estas nos permiten realizar optimizaciones como "hidratar" un componente solo cuando se vuelve visible, ahorrando así recursos y mejorando la experiencia del usuario. También es importante mencionar que si no "hidratamos" un componente, permanecerá estático, lo que significa que no se podrá interactuar con él, o al menos no se podrá interactuar con el estado.
Entonces... ¿vale la pena molestarse en usar diferentes tecnologías en un solo proyecto?
En mi opinión, la respuesta es un rotundo sí. Al utilizar diferentes tecnologías en un solo proyecto, puedes aprovechar las fortalezas de cada una. Por ejemplo, podríamos aprovechar al máximo la reactividad de Svelte para escuchar cambios en tiempo real sin la necesidad de useEffect. Por otro lado, el uso de useState en React puede ofrecer un manejo más estricto del estado.
Cada tecnología tiene sus propias fortalezas. Además, te diría que podrías lograr con una herramienta lo que podría ser difícil o imposible con otra. En resumen, utilizar diferentes tecnologías en un solo proyecto puede ser muy beneficioso.
¿Qué opinas tú?