**Ringkas:** Dengan FSE + header cache edge, kamu dapat menyajikan konten berbahasa berbeda secara cepat tanpa menambah beban server.
# Multi‑language site support in FSE + edge cache headers
## Kenapa kamu butuh solusi ini?
Kita semua tahu: pembaca internasional menuntut halaman yang tepat dalam bahasa mereka. Tanpa optimasi, mereka menunggu lama, bounce rate naik, konversi turun.
## Struktur halaman FSE untuk i18n
### 1. Template bahasa terpisah
– **Template**: `page-{lang}.html`
– **Penggunaan**: assign ke halaman via editor, bukan plugin.
### 2. Variabel bahasa di `functions.php`
“`php
function set_locale_for_fse(){
$lang = substr($_SERVER[‘HTTP_ACCEPT_LANGUAGE'],0,2);
switch($lang){
case ‘id': $locale='id_ID'; break;
case ‘fr': $locale='fr_FR'; break;
default: $locale='en_US';
}
switch_to_locale($locale);
}
add_action(‘init','set_locale_for_fse');
“`
> *Tip:* gunakan `switch_to_locale` pada hook `init` agar semua blok FSE ter‑render dalam bahasa yang tepat.
## Edge cache headers yang sering terlewat
### Cache‑Control
“`
Cache-Control: public, max-age=31536000, immutable
“`
– **public**: CDN boleh cache.
– **max‑age**: satu tahun, cocok untuk aset statis.
– **immutable**: browser tidak coba‑revalidate.
### Vary: Accept‑Language
“`
Vary: Accept-Language
“`
Menjamin CDN menyimpan variasi per bahasa. Tanpa ini, semua bahasa akan tersimpan dalam satu cache dan pengguna dapat menerima bahasa yang salah.
## Framework unik: “Locale‑First Rendering”
Alih‑alih dari “render‑once‑share‑later” menjadi “render‑per‑locale‑then‑cache”.
– **Langkah 1**: Server render halaman pertama kali untuk setiap bahasa yang didukung.
– **Langkah 2**: Hasil HTML dikirim ke Edge (Cloudflare, Fastly) dengan header di atas.
– **Langkah 3**: Edge menyajikan versi cache yang tepat berdasarkan `Accept-Language`.
### Kenapa ini lebih cepat?
– Server hanya mem‑process satu kali per bahasa.
– CDN meng‑serve HTML statis, mengurangi TTFB hingga 70%.
## Implementasi praktis di WordPress
1. **Buat template FSE bahasa** di folder tema: `templates/page-id.html`, `templates/page-fr.html`.
2. **Tambahkan filter** untuk `template_include` yang meng‑pilih template berdasarkan locale.
3. **Set header** di `functions.php`:
“`php
add_action(‘send_headers',function(){
header(‘Cache-Control: public, max-age=31536000, immutable');
header(‘Vary: Accept-Language');
});
“`
4. **Deploy ke CDN** – aktifkan *Cache‑Everything* dan *Edge‑Side‑Include* bila perlu.
## Kesalahan umum & cara menghindarinya
– **Lupa Vary** → bahasa bercampur.
– **Cache TTL terlalu pendek** → kehilangan manfaat edge.
– **Menggunakan plugin translation** bersamaan dengan FSE → duplikat konten, penalti SEO.
## FAQ
**Q1: Apakah saya masih membutuhkan plugin seperti WPML?**
A1: Tidak wajib. FSE + header sudah cukup untuk situs statis dengan sedikit konten dinamis.
**Q2: Bagaimana cara membersihkan cache saat konten berubah?**
A2: Kirim request `PURGE` ke CDN atau gunakan webhook pada publish.
**Q3: Apakah ini mempengaruhi SEO?**
A3: Ya. Dengan `Vary: Accept-Language` Google mengindeks tiap versi bahasa secara terpisah, meningkatkan visibilitas.
## Kesimpulan & CTA
Dengan menggabungkan FSE, locale‑first rendering, dan edge cache headers, kamu dapat menyajikan konten multi‑bahasa secara ultra‑cepat. Implementasi sederhana, manfaat besar untuk SEO dan pengalaman pengguna.
[Optimasi Performance Frontend di WordPress](/optimasi-performance-frontend-wordpress)
