Tirer parti de la conception en archipel dans Jahia CMS

La création d'un site web interactif ne devrait jamais compromettre la performance. L'architecture frontend évolue pour répondre aux exigences d'une expérience web toujours plus immersive sans sacrifier les normes de performance établies depuis des décennies. La conception en archipel est une approche novatrice qui permet aux développeurs de créer des sites web hautement interactifs tout en maintenant une performance optimale.

Qu'est-ce que la conception en archipel ?

Revenons en arrière pour comprendre ce qui a mené à l'invention de la conception en archipel.

Au début du web, les pages étaient statiques, produites sur le serveur par des frameworks et des langages comme PHP, Ruby on Rails ou Java. L'application produit du HTML et du CSS, et l'interactivité se limitait aux liens et aux formulaires. Cette approche est connue sous le nom de Rendu Côté Serveur (Server-Side Rendering, SSR).

Bien que cette approche ait été (et soit toujours) efficace pour de nombreux cas d'utilisation, elle offre une gamme limitée d'interactions et nécessite de recharger la page même pour des modifications mineures. Cela a conduit à l'émergence de son complet opposé : les Applications à Page Unique (Single Page Applications, SPA). Les SPA, propulsées par des frameworks JavaScript comme React, Vue ou Svelte, permettent aux développeurs de créer des applications web de bout en bout avec une interactivité riche sans nécessiter de rechargement de page complet.

Cependant, comme les SPA ne peuvent s'exécuter que dans le navigateur, elles ont généralement de mauvaises performances au chargement initial et ne sont pas favorables au SEO, ce qui peut nuire à l'expérience utilisateur et au classement dans les moteurs de recherche.

Imaginée par Katie Sylor-Miller, la conception en archipel est une nouvelle approche qui combine le meilleur des deux mondes : la performance des sites statiques et l'interactivité des SPA.

Un site web avec des "îles" d'interactivité est d'abord rendu par le serveur sous forme de page HTML statique. Lorsque la page se charge, JavaScript est utilisé pour hydrater (c'est-à-dire rendre interactives) uniquement les parties de la page qui en ont besoin, laissant le reste de la page en HTML statique.

Dans cet exemple, la page est principalement statique, à l'exception des composants <Navigation /> et <Video />, qui sont les îles d'interactivité de la page. Après le chargement initial de la page, JavaScript est utilisé pour hydrater ces composants, les rendant interactifs sans affecter le reste de la page.

L'hydratation est le processus qui consiste à transformer des éléments HTML statiques en composants interactifs en attachant des écouteurs d'événements et en les re-rendant lorsque leur état change. Une fois hydratés, le cycle de vie de React commence, et les composants se comportent comme des composants React classiques. La conception en archipel est souvent appelée Hydratation Partielle, par opposition à l'hydratation de page complète des SPA et des applications avec Rendu Côté Client (Client-Side Rendering, CSR).

Comme toutes les nouvelles approches, la conception en archipel présente son propre lot de défis pour les développeurs. Chez Jahia, nous nous engageons à faciliter la création de sites web interactifs avec des performances optimales.

Pourquoi utiliser la conception en archipel ?

Le rendu côté serveur est inégalé en termes de performance et de SEO. Vous ne pouvez pas battre la performance de l'envoi d'une page HTML complète au navigateur.

C'est pourquoi les sites web Jahia sont rendus sur le serveur par défaut. Le moteur de rendu de Jahia compose des composants React et/ou JSP en une page HTML statique, qui est ensuite envoyée au navigateur. Cette approche garantit que le chargement initial de la page soit rapide et favorable au SEO, et avec zéro octet de JavaScript par défaut.

Lors de l'utilisation de React, Jahia prend en charge trois stratégies de rendu différentes :

• Rendu Côté Serveur (SSR) : le composant est rendu sur le serveur et envoyé au navigateur sous forme de page HTML statique. C'est la stratégie de rendu par défaut dans Jahia, et elle n'est pas interactive.

  La plupart des pages de CMS entrent dans cette catégorie : articles de blog, pages de destination, pages de résultats de recherche, etc. Le SSR est également le choix le plus simple pour s'assurer que l'utilisateur dispose des autorisations appropriées pour accéder à la page.

• Conception en archipel (ou Hydratation Partielle) : le composant est rendu sur le serveur sous forme de page HTML statique, puis hydraté côté client pour le rendre interactif. Cela envoie à la fois du HTML et du JavaScript au navigateur.

  Par exemple, un menu de navigation peut être rendu en HTML statique puis amélioré avec des écouteurs d'événements pour le rendre interactif. Un champ de recherche peut suggérer des termes au fur et à mesure que l'utilisateur tape. Ou une galerie d'images peut afficher une lightbox lorsqu'une image est cliquée. Ces interactions ne sont pas critiques pour la page, mais elles améliorent l'expérience utilisateur.

• Rendu Côté Client (CSR) : le composant n'est rendu que côté client, ce qui signifie que le navigateur ne reçoit que du JavaScript, et pas de HTML.

  Cette approche doit être utilisée avec parcimonie, et réservée aux composants non critiques qui ne fonctionneraient pas sans JavaScript. Cette catégorie comprend les publicités, les animations, les formulaires de feedback, etc. S'assurer que votre site web fonctionne pour les utilisateurs sans JavaScript s'appelle l'Amélioration Progressive, et c'est l'un des nombreux aspects de l'Accessibilité.

La conception en archipel est la seule approche qui soit à la fois performante (chargement initial rapide) et interactive. En quoi est-ce différent du SSR avec un peu de jQuery, me demanderez-vous ? La différence clé est que, lors de la construction d'îles, vous utilisez exactement les mêmes composants React sur le serveur et le client. Avoir une base de code monolingue sera plus facile à maintenir à long terme.

Utiliser la conception en archipel dans Jahia

Nous nous efforçons d'offrir une Expérience Développeur (Developer Experience, DX) optimale lors de l'utilisation de Jahia. Les API que nous fournissons pour implémenter la conception en archipel sont conçues pour être simples et intuitives.

Voici à quoi ressemble l'implémentation de la conception en archipel dans Jahia :

import { Island, jahiaComponent } from '@jahia/javascript-modules-library';
import Button from './Button.client.jsx';

// Déclare une vue pour les nœuds `example:card`
jahiaComponent(
  {
    componentType: 'view',
    nodeType: 'example:card',
  },
  ({ title }) => (
    // Ces <article> et <h1> sont rendus côté serveur
    <article>
      <h1>{title}</h1>
      {/* Ce <Button> est rendu côté serveur puis hydraté dans le navigateur */}
      <Island component={Button} />
    </article>
  )
);

Dans Jahia, tous les composants de vue sont rendus côté serveur. L'hydratation partielle et le Rendu Côté Client (CSR) sont implémentés à l'aide de composants fournis par Jahia : <Island /> pour l'hydratation partielle et <Island clientOnly /> pour le CSR.

Ce composant spécial prend une prop component, qui est le composant à hydrater ou à rendre dans le navigateur.

Le composant <Button /> est un composant React classique :

import { useState } from 'react';

export default function Button() {
  const [count, setCount] = useState(0);

  // Cliquer sur ce bouton incrémentera le compteur
  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {count} clics
    </button>
  );
}

Le composant est ensuite transformé par notre plugin Vite pour minifier le code JS envoyé au navigateur.

Utilisation avancée : Hydratation Partielle

Nous savons que tous les cas d'utilisation ne sont pas aussi simples qu'un compteur, et nous sommes allés plus loin que le paradigme de la conception en archipel.

Dans tous les exemples ci-dessus, l'île d'interactivité est une feuille de votre arborescence de composants, ce qui signifie qu'elle n'est parente d'aucun autre contenu. Cela soulève la question :

Comment imbriquer des composants interactifs avec du contenu statique ?

Un exemple d'un tel cas d'utilisation est un composant <Accordion /> : il est interactif mais son contenu est rendu sur le serveur.

Les API de Jahia prennent en charge la prop spéciale children de React. Voici comment le composant <Accordion /> peut être implémenté :

import { useState } from 'react';

// `title` est une prop de chaîne de caractères classique
// `children` est la prop spéciale qui contient le contenu de l'accordéon
export default function Accordion({ title, children }) {
  const [open, setOpen] = useState(false);

  return (
    <article>
      <button type="button" onClick={() => setOpen(!open)}>
        {title}
      </button>
      <div hidden={!open}>
        {/* Les enfants sont rendus sur le serveur, mais pas hydratés dans le navigateur */}
        {children}
      </div>
    </article>
  );
}

Ce composant est ensuite instancié à l'aide de Island :

import { Island, jahiaComponent } from '@jahia/javascript-modules-library';
import Accordion from './Accordion.client.jsx';

jahiaComponent(
  {
    componentType: 'view',
    nodeType: 'example:accordion',
  },
  ({ title }) => (
    <Island component={Accordion} props={{ title }}>
      {/* Ce contenu remplit la prop `children` */}
      <p>Je suis rendu sur le serveur !</p>
    </Island>
  )
);

<Accordion /> n'est plus la feuille de l'arborescence des composants : il peut prendre du contenu rendu par le serveur comme prop children, qui ne sera pas hydraté dans le navigateur.

Il y a aussi une prop title classique sur le composant <Accordion />, qui est fournie via la prop props de Island. Cela vous permet de passer n'importe quel nombre de props au composant interactif.

Essayez-nous !

Jahia CMS est open-source et gratuit à l'essai. Si vous souhaitez essayer notre implémentation de la conception en archipel en détail, veuillez vous référer à notre documentation pour commencer avec Jahia.

Créer un nouveau module avec Jahia est aussi simple que d'exécuter une commande :

npm init @jahia/module@latest

La commande vous guidera tout au long du processus de démarrage d'une nouvelle instance Jahia localement et d'y téléverser votre module.

Conclusion

Nous espérons que cet article vous a aidé à comprendre le concept de la conception en archipel et comment il peut être utilisé pour créer des sites web hautement interactifs avec des performances optimales dans Jahia.

Si cet article vous laisse sur votre faim de détails techniques, nous avons un autre article qui approfondit notre implémentation de la conception en archipel : Sous le capot : Hydratation des composants React en Java