Plantillas del lado del servidor: Jinja2 y Handlebars

Las plantillas del lado del servidor generan HTML en el servidor antes de enviarlo al navegador. Proporcionan marcado favorable para SEO desde el primer byte, funcionan sin JavaScript y evitan el problema de la "página en blanco hasta que se carga JS" propio de la representación exclusivamente del lado del cliente.

Jinja2 es la biblioteca de plantillas de facto de Python; la utilizan Flask, Django (mediante el backend incluido o jinja2), Pelican y mkdocs. La lógica se escribe en etiquetas {% %} y las expresiones, en {{ }}: <h1>{{ title }}</h1> para las variables y {% for item in items %} para los bucles.

Handlebars es la biblioteca de plantillas más utilizada en Node.js, popular para correos electrónicos transaccionales (SendGrid y Mailgun) y para SSR mediante Express. Las expresiones usan {{ }} y los bloques, {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

Ambos motores escapan automáticamente la salida de las variables de forma predeterminada; {{ user.name }} con name = "<script>" produce "&lt;script&gt;", lo que neutraliza XSS. Confíe siempre en el escape automático; use el filtro explícito de contenido sin escape (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) únicamente para HTML de confianza.

Jinja: {% extends "base.html" %} en la plantilla hija y {% block content %}{% endblock %} en la plantilla base. Handlebars: {{#> layout }}{{/layout}} con bloques parciales. Esto permite que un diseño base defina la estructura una sola vez; las páginas rellenan las regiones variables.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Ambos insertan otra plantilla en la actual. Los parciales son los elementos fundamentales de las bibliotecas de componentes grandes: se combinan para crear páginas y diseños.

Filtros de Jinja: {{ price|currency }}. Helpers de Handlebars: {{currency price}}. Ambos permiten llamar a funciones de formato sobre valores. Defina los suyos para realizar transformaciones específicas del proyecto, como formatear fechas, pluralizar o crear enlaces.

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. Permiten ramificar las plantillas según los datos sin recurrir a JavaScript del lado del cliente para ocultar o mostrar contenido.

Ambos motores precompilan las plantillas en funciones y después llaman a esas funciones en cada solicitud. La compilación se realiza una sola vez; el renderizado es rápido. En sitios con muchísimo tráfico, almacene en caché el resultado renderizado en el edge (Varnish, Cloudflare) en lugar de volver a renderizar páginas idénticas.

Combine las plantillas con bibliotecas de i18n: Jinja2 + Babel para Python, Handlebars + i18next para Node. Las plantillas contienen claves de traducción ({{ t "welcome" }}); la capa de i18n las resuelve en el idioma adecuado. Esto permite que una sola plantilla se renderice en muchos idiomas.

Los frameworks modernos incorporan sus propios formatos de plantillas: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET) y Slim/Haml (más concisos). Los patrones son los mismos; la sintaxis cambia. Seleccione el motor que corresponda al lenguaje y al ecosistema de su backend.

Las plantillas funcionan muy bien en sitios tradicionales renderizados en el servidor. Para aplicaciones más interactivas, frameworks como Next.js (React), Nuxt (Vue) y SvelteKit difuminan la línea: renderizan las plantillas en el servidor, pero los mismos componentes se hidratan en el cliente para proporcionar interactividad.

¿Por qué el escape automático es el comportamiento predeterminado en motores de plantillas como Jinja2 y Handlebars?

Los motores de plantillas del lado del servidor (Jinja2 para Python, Handlebars para JS, ERB/Twig/Blade para otras pilas) generan HTML en el servidor con variables, bucles, condicionales, parciales y herencia. El escape automático protege contra XSS de forma predeterminada. Combínelos con bibliotecas de i18n para crear sitios multilingües. Las plantillas son la base; los frameworks modernos añaden la hidratación.