Islands Architecture

Cette page démontre le concept clé d'Astro : les Islands. Tout le contenu autour est du HTML statique pur — aucun JavaScript n'est chargé pour l'afficher. Seuls les composants interactifs (les "îles") chargent du JS.

HTML Statique 0 Ko de JS

Ce bloc est 100% statique

Ce contenu est généré au moment du build et envoyé comme du HTML pur au navigateur. Aucun framework JavaScript n'est chargé pour l'afficher. Faites View Source dans votre navigateur : vous verrez du HTML propre, sans bundle JS.

React Islandclient:load

Newsletter

Ce composant s'hydrate immédiatement au chargement de la page (client:load). Il est interactif dès que la page s'affiche.
HTML Statique

Encore du contenu statique

Entre les deux composants interactifs, ce bloc est à nouveau du HTML statique pur. C'est la puissance d'Astro : vous choisissez précisément quels composants nécessitent du JavaScript.

0 Ko
JS pour ce bloc
100%
HTML statique
100
Score Lighthouse
React Islandclient:visible

Compteur interactif

Ce composant React ne s'hydrate que lorsqu'il entre dans le viewport. Scrollez vers le bas et observez : le JS ne se charge qu'à ce moment-là.

0

Comment ça marche ?

  • client:load — Le composant Newsletter s'hydrate immédiatement au chargement de la page.
  • client:visible — Le compteur ne s'hydrate que quand il entre dans le viewport (Intersection Observer).
  • sans directive — Les blocs statiques ne chargent aucun JavaScript. HTML pur.