Intégrer React, Vue et Svelte dans un projet Astro

Après avoir vu comment créer une première page avec Astro, explorons une de ses fonctionnalités les plus puissantes : l'intégration avec des frameworks comme React, Vue et Svelte. Astro permet d'utiliser plusieurs technologies dans un même projet, offrant une approche hybride adaptée à de nombreux cas d'usage. Mais est-ce aussi fluide qu'il n'y paraît ? Voyons les avantages, les inconvénients et comment bien s'en servir.

Pourquoi ajouter React, Vue ou Svelte à Astro ?

Astro adopte une approche HTML-first, où le JavaScript n'est chargé que lorsque c'est nécessaire. Toutefois, pour des interactions dynamiques, des composants React, Vue ou Svelte peuvent être intégrés afin de :

• Réutiliser du code existant sans tout réécrire.
• Ajouter des interactions ciblées tout en conservant un site performant.
• Bénéficier de l'écosystème de chaque framework pour des besoins spécifiques.

Installation et configuration

Astro facilite l'ajout de frameworks via son système d'intégrations. Voici comment installer les plus populaires :

Ajouter React :

npm run astro add react

Ajouter Vue :

npm run astro add vue

Ajouter Svelte :

npm run astro add svelte

Ces commandes installent les paquets nécessaires et mettent à jour astro.config.mjs :

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [react(), vue(), svelte()],
});

Utilisation des composants

Une fois installés, les composants peuvent être directement utilisés dans des fichiers .astro :

Exemple avec un composant React : Un compteur de clics

Étape 1 : Créer le composant React (CompteurDeClics.jsx)

// src/components/CompteurDeClics.jsx
import { useState } from "react";

export default function CompteurDeClics() {
  const [nombreDeClics, setNombreDeClics] = useState(0);

  return (
    <div>
      <p>Vous avez cliqué {nombreDeClics} fois</p>
      <button onClick={() => setNombreDeClics(nombreDeClics + 1)}>Cliquez ici</button>
    </div>
  );
}

Ce que fait le composant :

• Il affiche un compteur de clics.
• Chaque clic sur le bouton augmente le compteur de 1.

Étape 2 : Utiliser le composant dans une page Astro

---
import CompteurDeClics from "../components/CompteurDeClics.jsx";
---

<h1>Compteur de clics</h1>
<p>Cliquez sur le bouton pour augmenter le compteur :</p>

<CompteurDeClics client:load />

Ce que fait la page Astro :

• Elle importe et affiche le composant CompteurDeClics.
• client:load signifie que le composant devient interactif dès que la page est chargée.

Résultat

Sur la page, vous verrez :

• Un titre "Compteur de clics".
• Un texte expliquant ce qu'il faut faire.
• Un bouton "Cliquez ici".

Chaque fois que vous cliquez sur le bouton, le compteur augmente.

Avantages et inconvénients

✅ Avantages :

• Plus de liberté pour choisir le bon outil selon le besoin.
• Moins de JavaScript inutile, seuls les morceaux nécessaires sont chargés.
• Facile à réutiliser si tu utilises déjà React, Vue ou Svelte.

❌ Inconvénients :

• Jongler entre plusieurs frameworks peut vite devenir un casse-tête.
• Risque de surcharger le site et d'affecter les performances.
• Nécessite une bonne gestion du chargement des composants.

Conclusion

Avec Astro, on peut profiter du meilleur des deux mondes : la rapidité d’un site statique et la flexibilité des composants interactifs avec React, Vue ou Svelte. C’est une super option pour ajouter des fonctionnalités dynamiques tout en gardant un site performant.

Mais attention à ne pas en abuser ! Trop de frameworks peuvent alourdir le projet. L’idéal est de rester simple et de n’ajouter du JavaScript que quand c’est vraiment utile.

Ressources

• Medium, Eric Risco, How to Incorporate React Components in an Astro Website, https://medium.com/@erisco_and/how-to-incorporate-react-components-in-an-astro-website-2a07abc266f4 (Page consultée le 12 février 2025).

• LogRocket, Elijah Asaolu, Exploring Astro and Svelte vs. SvelteKit: A comparative guide, https://blog.logrocket.com/exploring-astro-svelte-vs-sveltekit/ (Page consultée le 12 février 2025).

• Vue Mastery, Elian Van Cutsem, Getting Started with Astro for Vue Developers, https://www.vuemastery.com/blog/getting-started-with-astro-for-vue-developers/#install-setup (Page consultée le 12 février 2025).