Pola Thin Route + Shared Component buat Halaman Dwibahasa di Astro

Situs dwibahasa gampang berakhir dengan markup yang di-duplikat dua kali — sekali di /halaman.astro, sekali lagi di /en/halaman.astro — dan setiap perubahan desain harus diinget buat diterapin di dua tempat. Situs ini pakai pola berbeda: thin route + shared component.

Cara kerjanya: setiap halaman listing/detail (Home, Portfolio, Blog) punya satu component “body” yang locale-agnostic di src/components/pages/, misalnya BlogIndex.astro. Component ini nerima locale sebagai prop, ngambil dictionary lewat getDictionary(locale) buat semua teks chrome (label, judul section), dan manggil getBlogPosts(locale) buat data konten — nggak ada teks yang di-hardcode.

Route file-nya sendiri jadi nyaris kosong — src/pages/blog/index.astro isinya cuma import component dan render <BlogIndex locale="id" />, sementara src/pages/en/blog/index.astro render <BlogIndex locale="en" />. Satu baris beda locale, sisanya sama persis.

Kenapa nggak semua halaman pakai pola ini? Halaman kayak About dan Contact sengaja saya kecualikan, karena isinya prose yang nggak berulang — bio saya di halaman About nggak sama persis strukturnya kayak dictionary chrome, jadi lebih masuk akal ditulis langsung per file per bahasa daripada dipaksa masuk sistem dictionary yang dirancang buat label pendek yang berulang.

Manfaat nyata polanya: kalau saya ubah layout kartu blog post, saya cukup edit satu file (PostCard.astro, dipanggil dari BlogIndex.astro), dan otomatis konsisten di kedua bahasa — nggak perlu inget nerapin perubahan yang sama dua kali. Kalau markup-nya dobel dari awal, saya harus disiplin edit dua tempat setiap kali, dan itu jenis disiplin yang gampang bocor pas lagi buru-buru.

Pola ini bukan sesuatu yang canggih, cuma disiplin pemisahan concern yang konsisten. Tapi disiplin kecil kayak gini yang bikin situs dwibahasa tetep gampang di-maintain seorang diri.