Qu'est-ce que l'architecture en îlots ?

L'architecture en îlots est un pattern frontend qui rend la majeure partie d'une page en HTML statique et ne traite que des widgets interactifs spécifiques comme des composants isolés et hydratés. Au lieu d'expédier une single-page-application complète, le navigateur reçoit une mer de HTML avec de petits îlots de JavaScript. Pour les boutiques de commerce, le résultat est beaucoup moins d'hydratation et une empreinte first-party-JS bien plus réduite.

Définition

Des frameworks comme Astro, Eleventy avec Is-land, Fresh sur Deno et l'écosystème Marko ont popularisé le pattern, et des concepts similaires apparaissent dans la resumability de Qwik et dans le découpage RSC plus composants client de React. Le moteur de rendu produit le HTML de toute la page et n'émet des scripts d'hydratation que pour les composants explicitement marqués comme interactifs, avec des directives telles que client:idle, client:visible ou client:media. Chaque îlot s'hydrate indépendamment, peut utiliser n'importe quel framework (React, Vue, Svelte, Solid) et évite le coût d'hydratation global qu'une SPA typique paie au premier chargement.

Pourquoi c'est important

Sur les sites de commerce, l'essentiel du markup est statique pour une session donnée : en-tête, pied de page, fil d'Ariane, hero, blocs de texte, descriptions de catégorie, contenu SEO. Seule une poignée de composants ont réellement besoin d'être interactifs, comme l'ajout au panier, le sélecteur de variantes, le mini-panier et les filtres. Les îlots correspondent à cette réalité et la convertissent en gains mesurables sur l'INP et le time-to-interactive. Ils simplifient aussi le budgétage de performance car le coût de chaque îlot est visible et borné. Le CLS s'améliore également, car le markup statique est livré entièrement formé et seuls les îlots bougent à l'intérieur de conteneurs réservés.

Cas d'usage

Les parties à forte composante éditoriale d'une boutique headless-commerce, comme les tunnels de landing-page, les pages de marque, le contenu de blog et les centres d'aide, sont d'excellents candidats pour l'architecture en îlots sur Astro ou Fresh. Les équipes associent cela à un content-management-system-cms comme Hygraph ou Sanity, déploient via Cloudflare Pages, Netlify ou Vercel et atteignent des Core Web Vitals quasi parfaits d'emblée. Pour les parcours commerce plus profonds, les îlots peuvent envelopper le mini-panier, le sélecteur de devise, l'overlay de recherche et les widgets de recommendation-engine pendant que le reste demeure statique. Le pattern est aussi une progression naturelle pour les équipes utilisant les React Server Components, puisque le RSC formalise essentiellement la même idée au sein de l'écosystème React.

Voir aussi

Découvrez Composable Headless Frontend · Performance and Core Web Vitals.