Bagi Anda yang baru terjun menggunakan Static Site Generator (SSG) modern seperti Hugo dan Astro, Anda pasti sering melihat dua jenis ekstensi file yang digunakan untuk menulis konten, yaitu .md dan .mdx.
Keduanya sekilas terlihat mirip dan sama-sama digunakan untuk menulis artikel menggunakan simbol Markdown. Namun, di balik layar, format file .md dan .mdx memiliki kekuatan, fitur, dan fungsi yang sangat berbeda jauh.
Agar Anda tidak salah pilih saat membuat konten baru, mari kita bedah tuntas perbedaan mendalam antara file .md dan .mdx beserta panduan lengkap kapan Anda harus menggunakannya untuk optimasi website yang maksimal.
1. Mengenal File .md (Markdown Standar)
File dengan buntut .md adalah format Markdown tradisional. Format ini dirancang khusus agar penulis bisa mengetik konten teks dengan cepat menggunakan simbol-simbol sederhana (seperti tanda pagar untuk judul atau bintang untuk teks tebal) tanpa perlu menyentuh kode pemrograman yang rumit.
- Cara Kerja: Hugo dan Astro akan membaca file
.mdlalu secara otomatis mengubahnya menjadi halaman HTML statis biasa yang super cepat dibuka oleh pengunjung. - Kelebihan: Proses build sangat cepat, ringan, didukung secara bawaan (native), dan sangat bersih sehingga minim risiko error kodingan.
- Kekurangan: Hanya bisa menampilkan konten pasif (teks, gambar, tabel standar). Anda tidak bisa memasukkan komponen interaktif yang bisa diklik di tengah artikel.
2. Mengenal File .mdx (Markdown + JSX)
File dengan buntut .mdx adalah evolusi tingkat lanjut dari Markdown tradisional. Huruf “X” di belakangnya merujuk pada JSX (sintaks kodingan komponen yang biasa digunakan pada framework JavaScript seperti React, Vue, Svelte, atau Komponen Astro itu sendiri).
- Cara Kerja: File
.mdxmemungkinkan Anda menulis artikel menggunakan Markdown biasa, tetapi di tengah-tengah paragraf, Anda bisa langsung menyisipkan komponen kodingan interaktif yang dinamis. - Kelebihan: Sangat interaktif. Anda bisa memasukkan grafik data langsung yang bisa digeser, kalkulator buatan sendiri, tombol reaksi (seperti tombol like), hingga kuis interaktif di tengah tutorial.
- Kekurangan: Proses build sedikit lebih berat, tidak didukung secara bawaan di Hugo (butuh konfigurasi rumit), dan di Astro Anda harus menginstal integrasi
@astrojs/mdxterlebih dahulu.
Tabel Perbandingan Singkat: .md vs .mdx
| Fitur / Parameter | File .md (Markdown) | File .mdx (Markdown + JSX) |
|---|---|---|
| Fungsi Utama | Konten teks & media pasif | Konten teks + Komponen Interaktif |
| Dukungan di Hugo | Sangat Lancar (Bawaan) | Sangat Sulit (Butuh trik rumit) |
| Dukungan di Astro | Sangat Lancar (Bawaan) | Sangat Lancar (Lewat Integrasi) |
| Kecepatan Build | Super Cepat & Ringan | Sedikit lebih berat |
| Tingkat Kesulitan | Sangat Mudah (Untuk Pemula) | Menengah (Butuh dasar JavaScript) |
Panduan Memilih: Kapan Harus Pakai .md atau .mdx?
Agar website berbasis SSG Anda tetap berjalan dengan performa terbaik (super cepat, hemat penyimpanan, dan Core Web Vitals hijau), ikuti aturan praktis di bawah ini:
Kapan Wajib Memilih File .md?
- Saat Anda sedang menulis blog atau artikel harian di Hugo, karena Hugo dirancang paling optimal untuk Markdown biasa.
- Saat artikel Anda hanya berisi tulisan tutorial biasa, dokumentasi teks, berita, opini, gambar, atau barisan kode blok pasif yang tidak butuh interaksi klik dari pengunjung.
Kapan Boleh Memilih File .mdx?
- Harus dipertimbangkan saat Anda sedang mengembangkan proyek menggunakan Astro dan membutuhkan fitur komponen dinamis.
- Saat Anda ingin membuat artikel tutorial interaktif yang di dalamnya disisipkan alat khusus, seperti: kalkulator konversi otomatis, grafik statistik yang bergerak (charts), atau formulir survei mini di tengah halaman.
Kesimpulan
Gunakan .md sebagai senjata utama Anda untuk menulis konten harian karena sifatnya yang ringan, cepat, dan sangat ramah SEO. Di sisi lain, simpan kekuatan .mdx untuk artikel-artikel khusus di Astro yang memang membutuhkan fitur interaktif tingkat tinggi. Dengan membagi tugas ini secara tepat, website Anda akan tampil profesional sekaligus tetap memiliki kecepatan akses yang luar biasa!