💡 ULASAN & REFERENSI • DIPERBARUI: 22 October 2026 • REDAKSI AZWINN

Memahami Tag Directive SSI (Server Side Includes) di Web

Tag Directive SSI (Server Side Includes) adalah instruksi berbasis komentar HTML yang dieksekusi oleh server web sebelum halaman dikirimkan ke peramban pengguna. SSI umumnya digunakan untuk menyertakan konten dari satu file ke file HTML lainnya secara dinamis, seperti menyisipkan komponen modular berupa menu navigasi, footer, atau header di banyak halaman situs web tanpa harus menulis ulang kode yang sama.

Meskipun teknologi ini tergolong klasik, SSI masih sering diandalkan pada server seperti Apache dan Nginx karena sifatnya yang ringan dan tidak memerlukan pemrosesan sisi klien yang berat seperti JavaScript murni untuk komponen statis.

Sintaks Dasar Tag Directive SSI

Format penulisan SSI menggunakan struktur komentar HTML khusus yang diawali dengan <!--# dan diakhiri dengan -->. Di dalamnya terdapat perintah (directive) beserta parameter atribut tertentu.

<!--#directive parameter="nilai" -->

Berikut adalah tabel daftar perintah utama dalam SSI beserta fungsinya:

Directive SSI Fungsi Utama Contoh Penggunaan
include Menyisipkan isi file lain ke dalam dokumen saat ini. <!--#include virtual="/header.html" -->
echo Menampilkan variabel server (seperti tanggal atau IP). <!--#echo var="DATE_LOCAL" -->
set Memberi nilai pada variabel baru atau yang sudah ada. <!--#set var="title" value="Beranda" -->
if / elif / else / endif Membuat percabangan logika kondisional sederhana. <!--#if expr="$title = 'Beranda'" -->
flastmod Menampilkan waktu modifikasi terakhir file. <!--#flastmod virtual="index.html" -->

Cara Mengaktifkan SSI di Web Server

Agar server web membaca dan memproses tag directive SSI, konfigurasi server harus disesuaikan terlebih dahulu karena fitur ini sering kali dinonaktifkan secara default untuk alasan keamanan dan kinerja.

1. Konfigurasi pada Apache

Pada server Apache, modul include_module harus aktif. Tambahkan baris berikut ke dalam berkas konfigurasi virtual host atau berkas .htaccess:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

Dengan konfigurasi di atas, file yang menggunakan ekstensi .shtml akan diproses oleh server untuk mengeksekusi tag SSI di dalamnya.

2. Konfigurasi pada Nginx

Pada server Nginx, Anda harus mengaktifkan direktif ssi di dalam blok server atau lokasi file konfigurasi:

location / {
    ssi on;
    ssi_types text/html;
}

Kelebihan dan Kekurangan SSI Dibanding Teknologi Modern

Meskipun efisien untuk situs web statis berskala kecil hingga menengah, penggunaan SSI memiliki batasan jika dibandingkan dengan template engine modern seperti Twig, Blade, atau kerangka kerja JavaScript.

Aspek Server Side Includes (SSI) Template Engine Modern / CMS
Kompleksitas Sangat ringan, tidak perlu instalasi dependensi tambahan. Membutuhkan bahasa pemrograman server (PHP, Node.js, Python).
Performa Sangat cepat karena diproses langsung di level server web. Bergantung pada efisiensi bahasa pemrogramannya.
Logika Data Terbatas pada variabel server dan logika kondisional sederhana. Mendukung basis data penuh, perulangan kompleks, dan API eksternal.

Troubleshooting SSI yang Tidak Berfungsi

Jika tag SSI muncul secara mentah di halaman web (terlihat di browser tanpa dieksekusi), periksa beberapa hal berikut:

  • Pastikan modul SSI di Apache atau Nginx sudah diaktifkan oleh administrator server.
  • Periksa ekstensi file. Beberapa server mewajibkan ekstensi .shtml atau konfigurasi tambahan agar file .html biasa dapat memproses SSI.
  • Perhatikan penulisan spasi di dalam tag. SSI sangat sensitif terhadap spasi ekstra di dalam tanda kurung siku pembuka, misalnya <!-- #include --> (dengan spasi setelah tanda seru) akan gagal dieksekusi.

🔍 Orang Lain Juga Mencari Ini