Illustration for the postMaîtrisez les scripts JavaScript client avec Astro

Maîtrisez les scripts JavaScript client avec Astro

Astro est compatible avec des librairies frontend modernes telles que React, Vue.js, Svelte ou Solid.

Mais a-t-on systématiquement besoin d’installer une librairie frontend pour écrire du JavaScript côté client ?

Ajouter un script à un composant Astro

Astro offre un moyen simple d’insérer des scripts JavaScript dans un composant : utiliser la balise script du langage HTML. Rien à installer !

Ces scripts vous permettent d’ajouter de l’interactivité à votre site, par exemple pour ouvrir ou fermer un menu lors d’un clic. Pour les cas d’usage les plus simples, ils suffisent amplement.

En termes de code, cela ressemble à du HTML traditionnel :

---
// pages/index.astro
---
<html>
  <body>
    <h1>My Astro Page</h1>
    <script>
      console.log('Bonjour !');
    </script>
  </body>
</html>

Le script s’exécutera dans le contexte du navigateur, avec un accès complet aux APIs web et au DOM. Vous pouvez observer le console.log dans les outils de développement du navigateur.

Relation avec le rendu serveur

Attention, on parle bien dans cet article de scripts JavaScript côté navigateur.

Les composants Astro vous permettent aussi d’écrire du JavaScript côté serveur. Il ne faut donc pas confondre les deux.

La syntaxe des composants Astro rend la distinction bien visible. En haut du fichier, on est dans le monde du serveur. Après les “code fences”, c’est-à-dire le bloc entre tirets, on rendre dans le monde du navigateur avec du HTML et du JavaScript côté client.

---
console.log("Je m'affiche côté serveur uniquement !")
---
<script>
    console.log("Je m'affiche côté client uniquement !")
</script>

Pour passer des variables du frontmatter serveur à un script client, par exemple le titre d’un article que l’on aurait récupéré depuis la base de données, on utilise généralement un attribut “data” comme expliqué dans la documentation.

La directive define:vars peut aussi servir pour les cas les plus complexes.

Comportement des scripts dans Astro

On parle parfois de JavaScript “vanilla”, c’est-à-dire “nature” en français, pour parler de JavaScript sans librairie frontend.

Cependant, Astro est un framework moderne qui vous fait bénéficier de nombreuses avancées dans le monde du développement web.

Par défaut, Astro optimise la gestion des scripts de plusieurs façons :

Voici un exemple de script Astro que je tire de la documentation officielle :

---
// components/ConfettiButton.astro
---
<button data-confetti-button>Celebrate!</button>
<script>
  // On peut importer une librairie NPM !
  import confetti from 'canvas-confetti';

  // Le script est exécuté une seule fois 
  // pour tous les ConffetiButton de la page
  // d'où le querySelectorAll (et non querySelector)
  const buttons = document.querySelectorAll(
  '[data-confetti-button]'
  );
  // On utilise du JavaScript classique 
  // pour afficher des confettis lors d'un clic
  buttons.forEach((button) => {
    button.addEventListener('click', () => confetti());
  });
</script>

Pour des cas d’usage avancés, la direction is:inline vous permet de supprimer toute cette logique magique, et d’écrire du JavaScript totalement nature qui ne sera pas dédupliqué.

En résumé

La balise “script” des composants Astro est bien plus puissante que son équivalent en HTML pur. Il s’agit d’une solution déjà très puissante, qui peut servir à gérer des cas d’usage simples sans avoir à intégrer une librairie frontend dans votre applciation web.

Vous avez apprécié cette ressource ?

Découvrez toutes nos formations Next.js et Astro en présentiel ou en distanciel

Voire toutes les ressources

Partager sur Bluesky Partager sur X
Flux RSS