Modèle d’architecture en îlots
Servez principalement du HTML statique et hydratez uniquement les widgets interactifs pour optimiser le délai avant l’interactivité.
Modèle d’architecture en îlots est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que l'architecture en îlots ?
L'architecture en îlots envoie principalement du HTML statique avec de petites sections interactives hydratées indépendamment (les îlots). La majeure partie de la page n'utilise aucun JS ; seuls les composants qui nécessitent de l'interactivité deviennent des îlots React.
Le problème qu'elle résout
Le SSR traditionnel hydrate la page entière, même si 90 % de son contenu est statique (en-têtes, texte, images). Les îlots n'hydratent que les parties interactives, ce qui réduit considérablement la quantité de JavaScript envoyée au navigateur.
Concept fondamental
Imaginez la page comme une mer de HTML statique dans laquelle flottent des îlots d'interactivité. Chaque îlot s'hydrate indépendamment et peut utiliser une infrastructure différente si nécessaire.
Astro comme infrastructure en îlots
Astro a popularisé l'architecture en îlots. Les composants n'utilisent par défaut aucun JS. Ajoutez une directive client:* pour activer l'hydratation.
---
import Header from './Header.astro'; // static — 0 JS
import SearchBar from './SearchBar.jsx'; // island — hydrated
import Footer from './Footer.astro'; // static — 0 JS
---
<Header />
<SearchBar client:load /> <!-- hydrate immediately -->
<SearchBar client:idle /> <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />Directives d'hydratation
Les infrastructures en îlots proposent un calendrier d'hydratation granulaire : client:load (immédiate), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (requête média CSS).
Implémenter des îlots dans Next.js
Le routeur d'application de Next.js reproduit approximativement les îlots grâce à la séparation des composants serveur et client. Les composants serveur sont statiques ; les composants client sont des îlots.
// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
const product = await getProduct();
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Only the interactive button is a Client Component island */}
<AddToCartButton product={product} />
</article>
);
}Îlots manuels avec le chargement différé de React
Sans infrastructure dédiée, créez des îlots en chargeant les composants interactifs de manière différée, uniquement après le chargement de la page.
const HeavyWidget = lazy(() => import('./HeavyWidget'));
function Page() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setShow(true);
});
obs.observe(containerRef.current);
return () => obs.disconnect();
}, []);
return (
<div ref={containerRef}>
{show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
</div>
);
}Compromis
Avantages : quantité minimale de JS, TTI rapide, contenu statique mis en cache de façon agressive. Coûts : les îlots ne peuvent pas facilement partager leur état (contextes JS distincts) et l'architecture est plus complexe que celle d'une SPA standard.
Partager l'état entre les îlots
Utilisez des mécanismes natifs du navigateur (événements personnalisés, URL, localStorage) ou un petit singleton de stockage partagé pour communiquer entre des îlots indépendants.
// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);
// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));Quand utiliser l'architecture en îlots
Idéale pour : les sites riches en contenu (blogs, commerce électronique, marketing) où la majeure partie du contenu est statique et où seuls quelques composants nécessitent de l'interactivité (recherche, panier, formulaires).
Îlots contre SSR et SPA
SPA : tout le JS est chargé et tout est hydraté. SSR : le serveur effectue le rendu et tout est hydraté. Îlots : le serveur effectue le rendu de tout et seuls les composants interactifs sont hydratés. Pour les sites de contenu, les îlots offrent les meilleures performances.
Vérification rapide
Quel est le principal avantage en matière de performances du modèle d'architecture en îlots ?
Récapitulatif
L'architecture en îlots conserve la majeure partie du HTML sous forme statique (aucun JS) et hydrate uniquement les composants interactifs. Utilisez Astro comme infrastructure dédiée aux îlots, ou reproduisez cette approche avec les composants serveur et client de Next.js. Hydratez les îlots non essentiels de manière différée avec client:visible/IntersectionObserver.
Questions Fréquemment Posées
La leçon « Modèle d’architecture en îlots » est-elle gratuite ?
Oui — le texte complet de « Modèle d’architecture en îlots » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modèle d’architecture en îlots » ?
Servez principalement du HTML statique et hydratez uniquement les widgets interactifs pour optimiser le délai avant l’interactivité. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Modèle d’architecture en îlots » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Fonctionnement interne du SSR React
- Erreurs d’hydratation : causes et corrections
- Hydratation sélective et HTML diffusé en continu
- Modèle d’architecture en îlots