Шаблонизация на стороне сервера: Jinja2 и Handlebars

Серверные шаблоны создают HTML на сервере до отправки в браузер. Они сразу предоставляют разметку, оптимизированную для поисковых систем, работают без JavaScript и устраняют проблему «пустой страницы до загрузки JS», характерную для полностью клиентского отображения.

Jinja2 — фактически стандартная библиотека шаблонизации Python, используемая во Flask, Django (через встроенный или jinja2-бэкенд), Pelican и mkdocs. Логика записывается в тегах {% %}, а выражения — в {{ }}: <h1>{{ title }}</h1> используется для переменных, а {% for item in items %} — для циклов.

Handlebars — наиболее распространённая библиотека шаблонизации для Node.js, популярная для транзакционных писем (SendGrid, Mailgun) и SSR через Express. Выражения записываются в {{ }}, а блоки — в {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

Оба движка по умолчанию автоматически экранируют вывод переменных — {{ user.name }} со значением name = "<script>" выдаёт "&lt;script&gt;", нейтрализуя XSS. Всегда полагайтесь на автоматическое экранирование; используйте явный фильтр необработанного вывода (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) только для проверенной HTML-разметки.

Jinja: {% extends "base.html" %} в дочернем шаблоне, а {% block content %}{% endblock %} — в базовом. Handlebars: {{#> layout }}{{/layout}} с частичными блоками. Это позволяет базовому макету один раз определить структуру, а страницам заполнять изменяемые области.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Оба варианта встраивают другой шаблон в текущий. Частичные шаблоны — строительные блоки больших библиотек компонентов: из них составляют страницы и макеты.

Фильтры Jinja: {{ price|currency }}. Вспомогательные функции Handlebars: {{currency price}}. Оба механизма позволяют вызывать функции форматирования для значений. Определяйте собственные функции для преобразований, специфичных для проекта (форматирование дат, образование форм множественного числа, построение ссылок).

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. Разветвляйте шаблоны по данным, не прибегая к клиентскому JS, чтобы скрывать или показывать содержимое.

Оба движка предварительно компилируют шаблоны в функции, а затем вызывают эти функции для каждого запроса. Компиляция выполняется один раз, а отрисовка происходит быстро. Для сайтов с очень высокой посещаемостью кэшируйте отрисованный результат на периферии (Varnish, Cloudflare), а не отрисовывайте заново одинаковые страницы.

Сочетайте шаблоны с библиотеками интернационализации: Jinja2 + Babel для Python, Handlebars + i18next для Node. Шаблоны содержат ключи переводов ({{ t "welcome" }}), а слой интернационализации подставляет нужный язык. Это позволяет одному шаблону отображаться на многих языках.

Современные фреймворки предлагают собственные форматы шаблонов: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (более лаконичные). Принципы одинаковы, но синтаксис различается. Выбирайте движок, соответствующий языку и экосистеме вашего серверного приложения.

Шаблоны отлично подходят для традиционных сайтов с серверной отрисовкой. В более интерактивных приложениях фреймворки вроде Next.js (React), Nuxt (Vue) и SvelteKit стирают границу: они отображают шаблоны на сервере, а те же компоненты на клиенте проходят гидратацию для обеспечения интерактивности.

Почему автоматическое экранирование является поведением по умолчанию в таких движках шаблонов, как Jinja2 и Handlebars?

Движки шаблонов с серверной отрисовкой (Jinja2 для Python, Handlebars для JS, ERB/Twig/Blade для других стеков) генерируют HTML на сервере с помощью переменных, циклов, условных конструкций, частичных шаблонов и наследования. Автоматическое экранирование по умолчанию защищает от XSS. Сочетайте шаблоны с библиотеками интернационализации для многоязычных сайтов. Шаблоны — основа, а современные фреймворки добавляют поверх неё гидратацию.