Szablony po stronie serwera — Jinja2 i Handlebars

Szablony po stronie serwera generują HTML na serwerze przed wysłaniem go do przeglądarki. Zapewniają znaczniki przyjazne SEO już przy pierwszej odpowiedzi, działają bez JavaScriptu i eliminują problem "pustej strony do czasu wczytania JavaScriptu", typowy dla renderowania wyłącznie po stronie klienta.

Jinja2 to de facto standardowa biblioteka szablonów dla Pythona — używana przez Flask, Django (za pośrednictwem dołączonego backendu lub backendu jinja2), Pelican i mkdocs. Logikę zapisuje się w znacznikach {% %}, a wyrażenia w znacznikach {{ }}: <h1>{{ title }}</h1> służy do wyświetlania zmiennych, a {% for item in items %} do tworzenia pętli.

Handlebars to najczęściej używana biblioteka szablonów dla Node.js, popularna w przypadku wiadomości e-mail o charakterze transakcyjnym (SendGrid, Mailgun) oraz SSR za pośrednictwem Express. Wyrażenia zapisuje się w {{ }}, a bloki za pomocą {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

Oba silniki domyślnie automatycznie kodują dane wyjściowe zmiennych — {{ user.name }} przy name = "<script>" zwraca "&lt;script&gt;", neutralizując XSS. Należy zawsze polegać na automatycznym kodowaniu; jawnego filtra raw (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) należy używać wyłącznie w przypadku zaufanego kodu HTML.

Jinja: {% extends "base.html" %} w szablonie potomnym oraz {% block content %}{% endblock %} w szablonie bazowym. Handlebars: {{#> layout }}{{/layout}} z blokami partials. Pozwala to raz zdefiniować strukturę układu bazowego, a następnie wypełniać zmienne obszary na poszczególnych stronach.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Oba rozwiązania wstawiają inny szablon do bieżącego. Partials są podstawowymi elementami dużych bibliotek komponentów — składa się je w strony i layouty.

Filtry Jinja: {{ price|currency }}. Helpery Handlebars: {{currency price}}. Oba rozwiązania pozwalają wywoływać funkcje formatujące wartości. Własne helpery warto definiować na potrzeby transformacji specyficznych dla projektu, takich jak formatowanie dat, tworzenie liczby mnogiej czy budowanie linków.

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. Szablony można rozgałęziać na podstawie danych bez uciekania się do kodu JS po stronie klienta w celu ukrywania i wyświetlania treści.

Oba silniki wstępnie kompilują szablony do funkcji, a następnie wywołują te funkcje przy każdym żądaniu. Kompilacja odbywa się jednokrotnie, a renderowanie jest szybkie. W przypadku witryn o bardzo dużym ruchu warto buforować wyrenderowany wynik na brzegu sieci (Varnish, Cloudflare), zamiast ponownie renderować identyczne strony.

Szablony należy łączyć z bibliotekami i18n: Jinja2 + Babel w Pythonie, Handlebars + i18next w Node. Szablony zawierają klucze tłumaczeń ({{ t "welcome" }}), a warstwa i18n rozwiązuje je do właściwego języka. Dzięki temu jeden szablon może renderować treści w wielu językach.

Współczesne frameworki mają własne formaty szablonów: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (bardziej zwięzłe). Wzorce są takie same, różni się tylko składnia. Należy wybrać silnik pasujący do języka backendu i jego ekosystemu.

Szablony świetnie sprawdzają się w tradycyjnych witrynach renderowanych po stronie serwera. W przypadku bardziej interaktywnych aplikacji frameworki takie jak Next.js (React), Nuxt (Vue) i SvelteKit zacierają granicę — renderują szablony na serwerze, a te same komponenty są następnie poddawane hydratacji po stronie klienta, aby zapewnić interaktywność.

Dlaczego automatyczne escapowanie jest domyślnym zachowaniem silników szablonów, takich jak Jinja2 i Handlebars?

Silniki szablonów renderowanych po stronie serwera (Jinja2 dla Pythona, Handlebars dla JS oraz ERB/Twig/Blade dla innych stosów) generują HTML na serwerze przy użyciu zmiennych, pętli, instrukcji warunkowych, partials i dziedziczenia. Automatyczne escapowanie domyślnie chroni przed XSS. W przypadku witryn wielojęzycznych warto korzystać z bibliotek i18n. Szablony są fundamentem, na którym współczesne frameworki budują hydratację.