Template lato server: Jinja2 e Handlebars

I template lato server generano HTML sul server prima di inviarlo al browser. Forniscono markup ottimizzato per la SEO già dal primo byte, funzionano senza JavaScript ed evitano il problema della "pagina vuota finché non viene caricato JS" tipico del rendering interamente lato client.

Jinja2 è la libreria di templating Python de facto, utilizzata da Flask, Django (tramite il backend incluso o jinja2), Pelican e mkdocs. La logica si trova nei tag {% %} e le espressioni nei tag {{ }}: <h1>{{ title }}</h1> per le variabili e {% for item in items %} per i cicli.

Handlebars è la libreria di templating più usata in Node.js, molto diffusa per le email transazionali (SendGrid, Mailgun) e per il rendering lato server tramite Express. Le espressioni sono racchiuse in {{ }}, mentre i blocchi usano {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

Entrambi i motori eseguono automaticamente l'escape dell'output delle variabili: {{ user.name }} con name = "<script>" produce "&lt;script&gt;", neutralizzando XSS. Si affidi sempre all'escape automatico; utilizzi il filtro raw esplicito (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) solo per HTML attendibile.

Jinja: {% extends "base.html" %} nel template figlio e {% block content %}{% endblock %} nel template base. Handlebars: {{#> layout }}{{/layout}} con blocchi partial. In questo modo il layout di base definisce la struttura una sola volta, mentre le pagine riempiono le sezioni variabili.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Entrambi inseriscono un altro template in quello corrente. I partial sono gli elementi costitutivi di grandi librerie di componenti: vengono combinati per creare pagine e layout.

Filtri di Jinja: {{ price|currency }}. Helper di Handlebars: {{currency price}}. Entrambi permettono di chiamare funzioni di formattazione sui valori. Definisca i propri helper per le trasformazioni specifiche del progetto, come la formattazione delle date, la pluralizzazione e la creazione di link.

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. I template possono seguire rami diversi in base ai dati, senza ricorrere a JS lato client per nascondere o mostrare i contenuti.

Entrambi i motori precompilano i template in funzioni, quindi chiamano tali funzioni a ogni richiesta. La compilazione avviene una sola volta e il rendering è rapido. Per i siti con traffico molto elevato, memorizzi nella cache l'output renderizzato sull'edge (Varnish, Cloudflare) invece di eseguire nuovamente il rendering di pagine identiche.

Combini i template con librerie i18n: Jinja2 + Babel per Python, Handlebars + i18next per Node. I template contengono chiavi di traduzione ({{ t "welcome" }}); il livello i18n le risolve nella lingua corretta. In questo modo un solo template può essere renderizzato in molte lingue.

I framework moderni includono propri formati per i template: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (più concisi). I concetti sono gli stessi, ma la sintassi cambia. Scelga il motore più adatto al linguaggio e all'ecosistema del backend.

I template sono ideali per i siti tradizionali renderizzati sul server. Per applicazioni più interattive, framework come Next.js (React), Nuxt (Vue) e SvelteKit rendono meno netta la distinzione: eseguono il rendering dei template sul server, ma gli stessi componenti vengono idratati sul client per fornire interattività.

Perché l'escaping automatico è il comportamento predefinito nei motori di templating come Jinja2 e Handlebars?

I motori di templating lato server (Jinja2 per Python, Handlebars per JS, ERB/Twig/Blade per altri stack) generano HTML sul server usando variabili, cicli, condizionali, partial ed ereditarietà. L'escaping automatico protegge dagli attacchi XSS per impostazione predefinita. Li si abbina a librerie i18n per creare siti multilingue. I template sono il fondamento; i framework moderni aggiungono l'idratazione.