Sunucu Taraflı Şablonlama: Jinja2 ve Handlebars

Sunucu tarafı şablonları, tarayıcıya göndermeden önce HTML'yi sunucuda oluşturur. İlk baytta arama motoru dostu işaretleme sağlar, JavaScript olmadan çalışır ve tamamen istemci taraflı oluşturmanın yol açtığı "JS yüklenene kadar boş sayfa" sorununu önler.

Jinja2, fiilî Python şablonlama kitaplığıdır; Flask, Django (içerdiği veya jinja2 arka ucu aracılığıyla), Pelican ve mkdocs tarafından kullanılır. {% %} etiketlerinde mantık, {{ }} içinde ifadeler bulunur: değişkenler için <h1>{{ title }}</h1>, döngüler için {% for item in items %}.

Handlebars, işlemsel e-postalar (SendGrid, Mailgun) ve Express üzerinden SSR için popüler olan, en çok kullanılan Node.js şablonlama kitaplığıdır. İfadeler {{ }} içinde, bloklar {{# }} aracılığıyla yazılır: {{#each items}}<li>{{name}}</li>{{/each}}.

Her iki motor da varsayılan olarak değişken çıktısındaki özel karakterleri otomatik olarak kaçırır; {{ user.name }} ifadesi, name = "<script>" olduğunda "&lt;script&gt;" çıktısını üretir ve XSS'yi etkisiz hâle getirir. Her zaman otomatik kaçışa güvenin; açık ham çıktı süzgecini (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) yalnızca güvenilir HTML için kullanın.

Jinja: {% extends "base.html" %} çocuk şablonda, {% block content %}{% endblock %} ise temel şablonda kullanılır. Handlebars: parçalı bloklarla birlikte {{#> layout }}{{/layout}}. Böylece temel bir düzen yapıyı bir kez tanımlar; sayfalar değişken bölgeleri doldurur.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Her ikisi de başka bir şablonu mevcut şablona doğrudan ekler. Parçalı şablonlar, büyük bileşen kütüphanelerinin yapı taşlarıdır; sayfalar ve düzenler oluşturmak için bir araya getirilirler.

Jinja filtreleri: {{ price|currency }}. Handlebars yardımcıları: {{currency price}}. Her ikisi de değerler üzerinde biçimlendirme işlevlerini çağırmanızı sağlar. Projeye özgü dönüşümler için (tarih biçimlendirme, çoğullaştırma, bağlantı oluşturma gibi) kendi yardımcılarınızı tanımlayabilirsiniz.

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. İçeriği gizlemek veya göstermek için istemci tarafı JS kullanmak yerine şablonları verilere göre dallandırabilirsiniz.

Her iki motor da şablonları önce işlevlere dönüştürür, ardından her istekte bu işlevleri çağırır. Dönüştürme bir kez yapılır; oluşturma hızlıdır. Çok yüksek trafikli sitelerde aynı sayfaları yeniden oluşturmak yerine, oluşturulmuş çıktıyı uç önbelleğinde (Varnish, Cloudflare) önbelleğe alın.

Şablonları yerelleştirme kütüphaneleriyle birleştirin: Python için Jinja2 + Babel, Node için Handlebars + i18next. Şablonlar çeviri anahtarlarını taşır ({{ t "welcome" }}); yerelleştirme katmanı bunları doğru dile çözümler. Böylece tek bir şablon birçok dilde oluşturulabilir.

Modern uygulama çatıları kendi şablon biçimlerini sunar: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (daha kısa biçimler). Kalıplar aynıdır; söz dizimi farklıdır. Arka uç dilinize ve ekosisteminize uyan motoru seçin.

Şablonlar, geleneksel sunucu tarafında oluşturulan siteler için oldukça iyi çalışır. Daha etkileşimli uygulamalarda Next.js (React), Nuxt (Vue) ve SvelteKit gibi çatılar sınırı belirsizleştirir: Şablonları sunucuda oluştururlar, ancak etkileşim sağlamak için aynı bileşenleri istemcide yeniden etkinleştirirler.

Jinja2 ve Handlebars gibi şablon motorlarında otomatik kaçış neden varsayılan davranıştır?

Sunucu tarafı şablon motorları (Python için Jinja2, JS için Handlebars, diğer yığınlar için ERB/Twig/Blade), değişkenler, döngüler, koşullu ifadeler, parçalı şablonlar ve kalıtım kullanarak sunucuda HTML oluşturur. Otomatik kaçış varsayılan olarak XSS saldırılarına karşı koruma sağlar. Çok dilli siteler için yerelleştirme kütüphaneleriyle birlikte kullanın. Şablonlar temeldir; modern çatılar bunun üzerine istemci tarafında yeniden etkinleştirme katmanı ekler.