Modelagem no lado do servidor: Jinja2 e Handlebars

Modelos no lado do servidor geram HTML no servidor antes de enviá-lo ao navegador. Eles fornecem marcação otimizada para mecanismos de busca no primeiro byte, funcionam sem JavaScript e evitam o problema da "página em branco até o JavaScript carregar", comum na renderização puramente no cliente.

Jinja2 é a biblioteca de modelagem Python de fato padrão, usada por Flask, Django (por meio do mecanismo incluído ou do mecanismo jinja2), Pelican e mkdocs. A lógica fica nas tags {% %} e as expressões, em {{ }}: <h1>{{ title }}</h1> para variáveis e {% for item in items %} para laços.

Handlebars é a biblioteca de modelagem mais usada no Node.js, popular para emails transacionais (SendGrid e Mailgun) e SSR por meio do Express. As expressões ficam em {{ }} e os blocos usam {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

Ambos os mecanismos fazem o escape automático da saída de variáveis por padrão: {{ user.name }} com name = "<script>" produz "&lt;script&gt;", neutralizando XSS. Sempre confie no escape automático; use o filtro bruto explícito (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) somente para HTML confiável.

Jinja: {% extends "base.html" %} em um modelo filho, além de {% block content %}{% endblock %} no modelo base. Handlebars: {{#> layout }}{{/layout}} com blocos parciais. Permite que uma estrutura base defina a organização uma única vez; as páginas preenchem as regiões variáveis.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Ambos inserem outro modelo no modelo atual. Os parciais são os blocos de construção de grandes bibliotecas de componentes — combinados em páginas e estruturas.

Filtros do Jinja: {{ price|currency }}. Auxiliares do Handlebars: {{currency price}}. Ambos permitem chamar funções de formatação para valores. Defina os seus próprios para transformações específicas do projeto (formatação de datas, pluralização, criação de links).

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. Crie ramificações nos modelos com base nos dados sem recorrer ao JS no cliente para ocultar ou exibir conteúdo.

Ambos os mecanismos pré-compilam os modelos em funções e depois chamam essas funções a cada requisição. A compilação ocorre uma única vez; a renderização é rápida. Em sites com tráfego muito alto, armazene o resultado renderizado em cache na borda (Varnish, Cloudflare) em vez de renderizar novamente páginas idênticas.

Combine modelos com bibliotecas de internacionalização: Jinja2 + Babel para Python, Handlebars + i18next para Node. Os modelos carregam chaves de tradução ({{ t "welcome" }}); a camada de internacionalização resolve a chave para o idioma correto. Isso permite que um único modelo seja renderizado em vários idiomas.

As estruturas modernas trazem seus próprios formatos de modelo: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (mais concisos). Os padrões são os mesmos; a sintaxe é diferente. Escolha o mecanismo que corresponda à linguagem do servidor e ao ecossistema usados.

Os modelos funcionam muito bem em sites tradicionais renderizados no servidor. Para aplicativos mais interativos, estruturas como Next.js (React), Nuxt (Vue) e SvelteKit atenuam a separação — renderizam modelos no servidor, mas os mesmos componentes são hidratados no cliente para oferecer interatividade.

Por que o escape automático é o comportamento padrão em mecanismos de modelos como Jinja2 e Handlebars?

Os mecanismos de modelos no servidor (Jinja2 para Python, Handlebars para JS, ERB/Twig/Blade para outras tecnologias) geram HTML no servidor com variáveis, laços, condicionais, parciais e herança. O escape automático oferece proteção contra XSS por padrão. Combine-os com bibliotecas de internacionalização para sites em vários idiomas. Os modelos são a base; as estruturas modernas acrescentam hidratação.