Apa Itu Server Side Includes (SSI)? Panduan Teknis & Sintaks

Server Side Includes (SSI) adalah bahasa skrip sisi server sederhana yang digunakan untuk menyisipkan konten dari satu file ke dalam file HTML lainnya sebelum halaman tersebut dikirimkan ke peramban pengguna. SSI bekerja di tingkat web server (seperti Apache atau NGINX) dan sangat ideal untuk menyertakan elemen yang berulang—seperti header, footer, atau navigasi—di banyak halaman tanpa harus menyalin dan menempelkan kode secara manual.

Meskipun kalah populer dibandingkan bahasa pemrograman seperti PHP, Python, atau Node.js untuk aplikasi web kompleks, SSI tetap menjadi solusi yang sangat efisien, cepat, dan minim sumber daya untuk situs web statis yang memerlukan modularitas dasar.

Cara Kerja Server Side Includes

Ketika peramban meminta dokumen HTML, web server memproses file tersebut sebelum merespons. Jika server menemukan direktif khusus SSI di dalam file (biasanya berekstensi .shtml, .shtm, atau .stm), server akan mengeksekusi perintah tersebut, mengganti tag SSI dengan isi file yang diminta atau hasil dari eksekusi perintah sistem, lalu mengirimkan hasilnya ke pengguna.

Sintaks Dasar SSI

Format dasar SSI menggunakan komentar HTML khusus agar tidak terlihat oleh pengguna jika ditampilkan mentah. Sintaks umumnya adalah:

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

Tabel Direktif Utama SSI

Direktif 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" -->
#flastmod Menampilkan tanggal modifikasi terakhir dari suatu file. <!--#flastmod file="index.html" -->
#exec Menjalankan skrip atau perintah CGI/shell eksternal. <!--#exec cgi="/cgi-bin/script.cgi" -->
#set Membuat atau menetapkan nilai pada variabel baru. <!--#set var="title" value="Beranda" -->

Kelebihan dan Kekurangan SSI

Penggunaan SSI memiliki karakteristik teknis tersendiri yang perlu dipertimbangkan sebelum diterapkan dalam arsitektur web modern:

  • Kelebihan: Performa sangat cepat karena tidak membutuhkan mesin parser yang berat seperti PHP; sangat mudah diatur untuk situs web statis berskala kecil hingga menengah; mengurangi redundansi kode pada file HTML.
  • Kekurangan: Kurang fleksibel untuk logika pemrograman tingkat lanjut (kondisional kompleks, manajemen database); penggunaan direktif #exec dapat menimbulkan celah keamanan jika tidak dikonfigurasi dengan ketat oleh administrator server.

Mengaktifkan SSI di Apache Web Server

Secara default, beberapa server menonaktifkan SSI untuk alasan performa dan keamanan. Pada web server Apache, modul include harus diaktifkan dan konfigurasi direktori harus mengizinkan eksekusi SSI.

  1. Pastikan modul mod_include aktif pada server Apache Anda.
  2. Tambahkan konfigurasi berikut pada file httpd.conf atau berkas .htaccess di direktori situs Anda:
    Options +Includes
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
  3. Ubah ekstensi file HTML Anda dari .html menjadi .shtml agar server memproses direktif SSI di dalamnya.
  4. Sertakan file modular menggunakan tag include, contoh: <!--#include virtual="footer.html" -->.