Templating Sisi Server Jinja2 Handlebars

Templat sisi server membuat HTML di server sebelum mengirimkannya ke peramban. Templat ini menghasilkan markup yang ramah SEO sejak byte pertama, berfungsi tanpa JavaScript, dan menghindari masalah "halaman kosong sampai JS selesai dimuat" pada rendering murni di sisi klien.

Jinja2 adalah pustaka templating Python de facto — digunakan oleh Flask, Django (melalui backend included atau jinja2), Pelican, dan mkdocs. Logika berada dalam tag {% %}, sedangkan ekspresi berada dalam {{ }}: <h1>{{ title }}</h1> untuk variabel dan {% for item in items %} untuk perulangan.

Handlebars adalah pustaka templating Node.js yang paling banyak digunakan, populer untuk email transaksional (SendGrid, Mailgun) dan SSR melalui Express. Ekspresi berada dalam {{ }}, sedangkan blok menggunakan {{# }}: {{#each items}}<li>{{name}}</li>{{/each}}.

Kedua mesin secara bawaan melakukan pelolosan otomatis pada keluaran variabel — {{ user.name }} dengan name = "<script>" menghasilkan "&lt;script&gt;", sehingga menetralkan XSS. Selalu andalkan pelolosan otomatis; gunakan filter mentah eksplisit (Jinja: {{ x|safe }}, Handlebars: {{{x}}}) hanya untuk HTML tepercaya.

Jinja: {% extends "base.html" %} pada templat turunan, serta {% block content %}{% endblock %} pada templat dasar. Handlebars: {{#> layout }}{{/layout}} dengan blok parsial. Ini memungkinkan tata letak dasar mendefinisikan struktur satu kali; halaman mengisi bagian-bagian yang dapat berubah.

Jinja: {% include "header.html" %}. Handlebars: {{> header}}. Keduanya menyisipkan templat lain ke dalam templat saat ini. Parsial adalah blok penyusun pustaka komponen besar—digabungkan ke dalam halaman dan tata letak.

Filter Jinja: {{ price|currency }}. Fungsi pembantu Handlebars: {{currency price}}. Keduanya memungkinkan Anda memanggil fungsi pemformatan pada nilai. Tentukan fungsi Anda sendiri untuk transformasi khusus proyek, seperti pemformatan tanggal, pembentukan kata jamak, dan pembuatan tautan.

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. Pisahkan templat berdasarkan data tanpa perlu menggunakan JS sisi klien untuk menyembunyikan atau menampilkan konten.

Kedua mesin melakukan prakom­pilasi templat menjadi fungsi, lalu memanggil fungsi tersebut untuk setiap permintaan. Kompilasi dilakukan satu kali; perenderan berlangsung cepat. Untuk situs dengan lalu lintas sangat tinggi, simpan keluaran yang telah dirender di jaringan tepi (Varnish, Cloudflare), bukan merender ulang halaman yang identik.

Gabungkan templat dengan pustaka i18n: Jinja2 + Babel untuk Python, Handlebars + i18next untuk Node. Templat membawa kunci terjemahan ({{ t "welcome" }}); lapisan i18n menentukan bahasa yang tepat. Dengan demikian, satu templat dapat ditampilkan dalam banyak bahasa.

Kerangka kerja modern membawa format templatnya sendiri: ERB (Rails), Twig (Symfony), Blade (Laravel), Razor (.NET), Slim/Haml (lebih ringkas). Polanya sama; sintaksnya berbeda. Pilih mesin yang sesuai dengan bahasa backend dan ekosistem Anda.

Templat sangat cocok untuk situs tradisional yang dirender di server. Untuk aplikasi yang lebih interaktif, kerangka kerja seperti Next.js (React), Nuxt (Vue), dan SvelteKit mengaburkan batas—kerangka kerja tersebut merender templat di server, tetapi komponen yang sama dihidrasi di klien untuk menyediakan interaktivitas.

Mengapa pelolosan otomatis menjadi perilaku bawaan pada mesin templat seperti Jinja2 dan Handlebars?

Mesin templat sisi server (Jinja2 untuk Python, Handlebars untuk JS, ERB/Twig/Blade untuk tumpukan teknologi lain) menghasilkan HTML di server dengan variabel, perulangan, kondisional, parsial, dan pewarisan. Pelolosan otomatis melindungi dari XSS secara bawaan. Padukan dengan pustaka i18n untuk situs multibahasa. Templat adalah fondasinya; kerangka kerja modern menambahkan hidrasi di atasnya.