Architecture de Composants Serveur et d'Îlots

L'architecture en îlots est une approche moderne pour créer des applications web performantes en minimisant le JavaScript côté client.

Qu'est-ce que l'Architecture en Îlots ?

L'architecture en îlots implique :

• Du HTML rendu côté serveur pour le contenu statique
• Des « îlots » interactifs isolés pour les composants dynamiques
• Un minimum de JavaScript envoyé au client

Avantages

1. Meilleures Performances : moins de JavaScript à télécharger et analyser
2. Chargement Initial Plus Rapide : le HTML est immédiatement rendable
3. Adapté au SEO : rendu entièrement côté serveur
4. Amélioration Progressive : fonctionne sans JavaScript

Implémentation dans HonoX

Créez un composant îlot dans app/islands/Counter.tsx :

import { createIsland } from "honox/island";

export default createIsland({
  Component: function Counter() {
    const [count, setCount] = createSignal(0);
    
    return (
      <div>
        <p>Count: {count()}</p>
        <button onClick={() => setCount(count() + 1)}>
          Increment
        </button>
      </div>
    );
  },
});

Utilisez-le dans votre route :

import Counter from "../islands/Counter";

export default createRoute((c) => {
  return c.render(
    <div>
      <h1>My Page</h1>
      <p>This is static content.</p>
      <Counter client:load />
    </div>
  );
});

Bonnes Pratiques

• Gardez les îlots petits et ciblés
• Utilisez client:load seulement lorsque nécessaire
• Préférez le rendu serveur pour le contenu statique
• Utilisez client:idle pour l'interactivité non critique

Conclusion

L'architecture en îlots offre un excellent équilibre entre interactivité et performance.