Templating côté serveur : Jinja2 et Handlebars

Les modèles côté serveur génèrent le HTML sur le serveur avant de l’envoyer au navigateur. Ils fournissent un balisage favorable au référencement dès le premier octet, fonctionnent sans JavaScript et évitent le problème de la « page blanche jusqu’au chargement de JavaScript » propre au rendu entièrement côté client.

Jinja2 est la bibliothèque de modélisation Python de référence ; elle est utilisée par Flask, Django (via le moteur inclus ou le moteur jinja2), Pelican et mkdocs. La logique se trouve dans les balises {% %} et les expressions dans {{ }} : <h1>{{ title }}</h1> pour les variables, {% for item in items %} pour les boucles.

Handlebars est la bibliothèque de modélisation la plus utilisée pour Node.js, appréciée pour les courriels transactionnels (SendGrid, Mailgun) et le SSR via Express. Les expressions utilisent {{ }} et les blocs {{# }} : {{#each items}}<li>{{name}}</li>{{/each}}.

Les deux moteurs échappent automatiquement la sortie des variables par défaut : {{ user.name }} avec name = "<script>" produit "&lt;script&gt;", ce qui neutralise XSS. Fiez-vous toujours à l’échappement automatique ; n’utilisez le filtre brut explicite (Jinja : {{ x|safe }}, Handlebars : {{{x}}}) que pour du HTML de confiance.

Jinja : {% extends "base.html" %} dans le modèle enfant, et {% block content %}{% endblock %} dans le modèle de base. Handlebars : {{#> layout }}{{/layout}} avec des blocs partiels. Cela permet à un modèle de base de définir la structure une seule fois ; les pages remplissent les zones variables.

Jinja : {% include "header.html" %}. Handlebars : {{> header}}. Les deux insèrent un autre modèle dans le modèle actuel. Les modèles partiels sont les briques de base des grandes bibliothèques de composants : ils sont assemblés dans des pages et des mises en page.

Filtres Jinja : {{ price|currency }}. Assistants Handlebars : {{currency price}}. Les deux permettent d’appeler des fonctions de formatage sur des valeurs. Définissez les vôtres pour les transformations propres au projet (formatage des dates, gestion du pluriel, construction de liens).

Jinja : {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars : {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. Faites varier les modèles selon les données sans recourir à JS côté client pour masquer ou afficher le contenu.

Les deux moteurs précompilent les modèles en fonctions, puis appellent ces fonctions à chaque requête. La compilation n’a lieu qu’une fois ; le rendu est rapide. Pour les sites à très fort trafic, mettez en cache le rendu à la périphérie (Varnish, Cloudflare) plutôt que de régénérer des pages identiques.

Associez les modèles à des bibliothèques d’internationalisation : Jinja2 + Babel pour Python, Handlebars + i18next pour Node. Les modèles contiennent des clés de traduction ({{ t "welcome" }}) ; la couche d’internationalisation choisit la langue appropriée. Un seul modèle peut ainsi être rendu dans de nombreuses langues.

Les cadres logiciels modernes proposent leurs propres formats de modèles : ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (plus concis). Les principes sont les mêmes ; seule la syntaxe diffère. Choisissez le moteur qui correspond au langage de votre serveur et à son écosystème.

Les modèles conviennent parfaitement aux sites traditionnels dont le rendu est produit par le serveur. Pour les applications plus interactives, des cadres logiciels comme Next.js (React), Nuxt (Vue) et SvelteKit rendent la distinction floue : ils produisent le rendu des modèles sur le serveur, puis les mêmes composants sont hydratés côté client pour assurer l’interactivité.

Pourquoi l’échappement automatique est-il le comportement par défaut des moteurs de modèles comme Jinja2 et Handlebars ?

Les moteurs de modèles côté serveur (Jinja2 pour Python, Handlebars pour JS, ERB/Twig/Blade pour d’autres piles techniques) génèrent du HTML sur le serveur à partir de variables, de boucles, de conditionnelles, de modèles partiels et d’héritage. L’échappement automatique protège par défaut contre XSS. Associez-les à des bibliothèques d’internationalisation pour les sites multilingues. Les modèles sont la fondation ; les cadres logiciels modernes ajoutent une couche d’hydratation.