1 menit baca
MDX dan Komponen Interaktif
Salah satu fitur paling powerful dari MDX adalah kemampuan untuk menyematkan komponen React interaktif langsung di dalam konten Markdown. Ini mengubah tulisan blog statis menjadi dokumen yang hidup.
Contoh Counter Sederhana
Berikut komponen counter interaktif yang disematkan langsung di tulisan ini:
0
Mengapa Ini Penting
Blog tradisional bersifat statis — kamu baca teks dan selesai. Dengan MDX, kamu bisa:
- Menampilkan demo kode langsung yang bisa diinteraksi pembaca
- Menyematkan visualisasi data yang update secara real-time
- Membuat tutorial interaktif di mana pembaca bisa bereksperimen
Cara Kerjanya
Di Astro, file MDX hidup berdampingan dengan konten Markdown biasa. Cukup impor komponen React di bagian atas file dan gunakan secara inline. Astro menangani hidrasi secara otomatis dengan direktif client:.
---
title: Tulisan MDX Saya
---
import { Chart } from '../components/Chart.tsx';
# Menggunakan Chart
<Chart data={[1, 2, 3]} client:visible />Direktif client:visible berarti komponen hanya terhidrasi saat masuk viewport — menghemat bandwidth untuk pembaca yang tidak scroll sampai situasi itu.