Tutorial SSI HTML: Cara Pakai Server Side Includes di Nginx & Apache

Server Side Includes (SSI) adalah bahasa scripting sisi server sederhana yang digunakan untuk menyisipkan konten dari satu file ke dalam file HTML lainnya sebelum dikirim ke browser. SSI sangat ideal untuk situs web statis yang memerlukan komponen berulang seperti header, footer, atau navigasi tanpa harus menggunakan database atau bahasa backend yang kompleks seperti PHP atau Node.js.

Untuk mengimplementasikan SSI, file HTML Anda biasanya harus memiliki ekstensi khusus seperti .shtml. Server web kemudian akan memindai file tersebut, mengeksekusi direktif SSI, dan merender hasilnya ke pengguna akhir.

Sintaks Dasar SSI HTML

Format dasar direktif SSI ditulis dalam bentuk komentar HTML agar tidak merusak tampilan halaman jika diakses secara lokal. Berikut adalah sintaks utama yang paling sering digunakan dalam produksi:

<!--#include virtual="/path/to/file.html" -->
<!--#include file="relative-file.html" -->
<!--#echo var="DATE_LOCAL" -->
<!--#flastmod file="index.html" -->

Perbandingan Direktif Include SSI

Langkah Konfigurasi Server

Agar server web mengenali dan mengeksekusi perintah SSI, Anda harus mengaktifkan modul SSI pada konfigurasi server yang Anda gunakan (Apache atau Nginx).

1. Konfigurasi pada Apache

Pastikan modul include aktif, lalu tambahkan baris konfigurasi berikut di dalam blok Directory atau file .htaccess Anda:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
Options +Includes

2. Konfigurasi pada Nginx

Nginx memerlukan pengaktifan modul SSI secara eksplisit di dalam blok server atau blok lokasi pada file nginx.conf:

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

# Jika menggunakan ekstensi .shtml
location ~ \.shtml$ {
    ssi on;
    default_type text/html;
}

Contoh Penerapan Nyata

Berikut adalah implementasi nyata pemisahan komponen header.shtml dan footer.shtml pada file utama index.shtml:

<!--#include virtual="/includes/header.shtml" -->
<main>
    <h1>Selamat Datang di Situs Kami</h1>
    <p>Halaman ini menggunakan Server Side Includes untuk efisiensi kode.</p>
</main>
<!--#include virtual="/includes/footer.shtml" -->

Troubleshooting SSI Lapangan

• Halaman Kosong / Direktif Tampil Mentah: Pastikan ekstensi file Anda sudah diubah dari .html menjadi .shtml dan server sudah dikonfigurasi untuk memparsing file tersebut.
• Error 500 Internal Server Error: Periksa path file pada atribut virtual atau file. Pastikan path tersebut benar dan memiliki izin baca (chmod) yang sesuai untuk web server.
• Komentar Diabaikan: Pada beberapa server, pastikan tidak ada konflik dengan kompresi Gzip yang memotong proses parsing SSI sebelum dikirim ke client.