Tirer parti de l'architecture en îlots dans Jahia CMS

La création d'un site web interactif ne doit jamais compromettre les performances. L'architecture frontale évolue pour répondre aux exigences d'une expérience web toujours plus immersive sans sacrifier les normes de performance en vigueur depuis des décennies. L'architecture insulaire est une approche novatrice qui permet aux développeurs de créer des sites web hautement interactifs tout en maintenant des performances optimales.

Qu'est-ce que l'architecture insulaire ?

Remontons dans le temps pour comprendre ce qui a conduit à l'invention de l'architecture insulaire.

Dans les premiers temps du web, les pages étaient statiques, rendues sur le serveur par des cadres et des langages tels que PHP, Ruby on Rails ou Java. L'application produit du HTML et du CSS, et l'interactivité est limitée aux liens et aux formulaires. Cette approche est connue sous le nom de "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 pour des changements même mineurs. Cela a conduit à l'émergence de son opposé polaire : les applications à page unique (SPA) : les applications à page unique (SPA). Les SPA, alimentées par des frameworks JavaScript tels que React, Vue ou Svelte, permettent aux développeurs de créer des applications web de bout en bout dotées d'une riche interactivité sans qu'il soit nécessaire de recharger entièrement la page.

Cependant, comme les SPA ne peuvent être exécutées que dans le navigateur, elles ont généralement de mauvaises performances de chargement initial et ne sont pas adaptées au référencement, ce qui peut nuire à l'expérience de l'utilisateur et au classement dans les moteurs de recherche.

Créée par Katie Sylor-Miller, l'architecture en îlots est une nouvelle approche qui combine le meilleur des deux mondes : les performances des sites statiques et l'interactivité des SPA.

Un site web comportant des "îlots" d'interactivité est d'abord rendu par le serveur sous la forme d'une page HTML statique. Lorsque la page est chargée, JavaScript est utilisé pour hydrater (c'est-à-dire rendre interactive) 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 essentiellement statique, à l'exception des composants <Navigation /> et <Vidéo />, qui constituent les îlots 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 consiste à transformer des éléments HTML statiques en composants interactifs en y attachant des récepteurs d'événements et en les réaffichant lorsque leur état change. Une fois hydratés, le cycle de vie de React démarre et les composants se comportent comme des composants React normaux. L'architecture en îlot est souvent qualifiée d'hydratation partielle, par opposition à l'hydratation pleine page des SPA et des applications avec le Client-Side Rendering (CSR).

Comme toutes les nouvelles approches, l'architecture en îlot présente son propre ensemble 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 l'architecture en îlot ?

Le rendu côté serveur est inégalé en termes de performances et de référencement. Il est impossible de faire mieux que d'envoyer 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 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 est rapide et favorable au référencement, 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 :

• Server-Side Rendering (SSR) : le composant est rendu sur le serveur et envoyé au navigateur en tant que page HTML statique. Il s'agit de la stratégie de rendu par défaut dans Jahia, et elle n'est pas interactive. La plupart des pages CMS entrent dans cette catégorie : articles de blog, pages d'atterrissage, pages de résultats de recherche, etc. SSR est également le choix le plus simple pour s'assurer que l'utilisateur dispose des autorisations nécessaires pour accéder à la page.
• Architecture en îlot (ou hydratation partielle) : le composant est rendu sur le serveur sous la forme d'une page HTML statique, puis hydraté sur le 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 récepteurs d'événements pour le rendre interactif. Une entrée de recherche peut suggérer des termes au fur et à mesure que l'utilisateur les tape. Ou encore, une galerie d'images peut afficher une boîte lumineuse lorsque l'utilisateur clique sur une image. Ces interactions ne sont pas essentielles à la page, mais elles améliorent l'expérience de l'utilisateur.
• Rendu côté client (CSR) : le composant n'est rendu que sur le 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 retour d'information, 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é.

L'architecture en île est la seule approche qui soit à la fois performante (chargement initial rapide) et interactive. En quoi est-elle différente de la RSS avec un peu de jQuery, me direz-vous? La principale différence est que, lorsque vous construisez des îles, vous utilisez exactement les mêmes composants React sur le serveur et le client. Le fait d'avoir une base de code en un seul langage sera plus facile à maintenir à long terme.

Utiliser l'architecture en îlots dans Jahia

Nous nous efforçons d'offrir une expérience développeur (DX) optimale lors de l'utilisation de Jahia. Les API que nous fournissons pour mettre en œuvre l'architecture en îlot sont conçues pour être simples et intuitives.

Voici à quoi ressemble la mise en œuvre de l'architecture de l'île dans Jahia :

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

// Déclare une vue pour les noeuds `example:card`.
jahiaComponent(
{
componentType : 'view',
nodeType : 'example:card',
},
({ title }) => (
// Ces <article> et <h1> sont rendus par le serveur
<article>
<h1>{titre}</h1>
{/* Ce <Button> est rendu serveur puis hydraté dans le navigateur */}
<HydrateInBrowser child={Button} />
</article>
)
) ;

Dans Jahia, tous les composants de la vue sont rendus par le serveur. L'hydratation partielle et le rendu côté client (CSR) sont mis en œuvre à l'aide de composants fournis par Jahia : HydrateInBrowser pour l'hydratation partielle et RenderInBrowser pour le CSR.

Ces deux composants spéciaux prennent un composant enfant , qui est le composant à hydrater ou à rendre dans le navigateur.

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

import { useState } from 'react' ;

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

// Cliquer sur ce bouton incrémentera le compte
return (
<button type="button" onClick={() => setCount(count + 1)}>
{compte} 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 comprenons 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 l'architecture en îlots.

Dans tous les exemples ci-dessus, l'îlot d'interactivité est une feuille de votre arbre de composants, ce qui signifie qu'il n'est pas parent d'un autre contenu. Cela soulève une question :

Comment intercaler des composants interactifs avec du contenu statique ?

Un exemple de ce 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 propriété spéciale React children . Voici comment le composant <Accordion /> peut être mis en œuvre :

import { useState } from 'react' ;

// `title` est une chaîne de caractères normale
// `children` est la propriété 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 ne sont pas hydratés dans le navigateur */}
{enfants}
</div>
</article>
) ;
}

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

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

jahiaComponent(
{
componentType : 'view',
nodeType : 'example:accordion',
},
({ title }) => (
<HydrateInBrowser child={Accordion} props={{ title }}>
{/* Ce contenu remplit la propriété `children` */}
</p> <p>Je suis rendu sur le serveur!</p> <p>Il est rendu sur le serveur !
</HydrateInBrowser>
)
) ;

<Accordion /> n'est plus la feuille de l'arbre du composant : il peut prendre du contenu rendu sur le serveur comme son accessoire `children`, qui ne sera pas hydraté dans le navigateur.

Le composant <Accordion /> dispose également d'une propriété de titre ordinaire, qui est fournie par la propriété props de HydrateInBrowser. Cela vous permet de passer n'importe quel nombre d'accessoires au composant interactif.

Essayez-le !

Jahia CMS est un logiciel libre et gratuit. Si vous souhaitez essayer notre implémentation de l'architecture de l'île en détail, veuillez vous référer à notre documentation pour démarrer avec Jahia.

Créer un nouveau module avec Jahia est aussi simple que de lancer une commande :

npm init @jahia/module@latest <nom du module>

Le CLI vous guidera à travers le processus de démarrage d'une nouvelle instance locale de Jahia et de téléchargement de votre module.

Conclusion

Nous espérons que cet article vous a aidé à comprendre le concept d'architecture en îlot et comment il peut être utilisé pour construire des sites web hautement interactifs avec des performances optimales dans Jahia.

Si cet article vous laisse sur votre soif de détails techniques, nous avons un autre article qui va plus loin dans notre implémentation de l'architecture en îlot : Hydratation des composants React dans un CMS Java.